526互联

Vue3带来的新变化

发布时间 2023-09-05 16:22:28作者: 码上有你
Vue3带来的新变化
  1. 性能提升
  • 首次渲染更快
  • diff算法更快
  • 内存占用更少
  • 打包体积变小
  1. 更好的Typescript支持
  2. Composition API （重点）
在使用vue2.x版本开发较复杂的组件时，逻辑难以复用，组合式api的出现可以解决此类问题
相关阅读：
  1. Vue3 中文文档  https://vue3js.cn/docs/zh/
  2. Vue3 设计理念  https://vue3js.cn/vue-composition/ 破坏性语法更新
vue3.0对于2.0版本的大部分语法都是可以兼容的，但是也有一些破坏性的语法更新，需要格外注意
  1. 实例方法$on移除   （eventBus现有实现模式不再支持 可以使用三方插件替代）
  2. 过滤器filter移除 （插值表达式里不能再使用过滤器 可以使用methods替代）
  3. .sync语法移除  （和v-model语法合并）
Vue3开发环境搭建
项目搭建成功后,可以看一下package.json文件，在dependencies配置项中显示，当前使用的版本为3.0.0
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
}
项目环境可以查看我写的另一篇文章：https://www.cnblogs.com/panwudi/p/16086040.html然后打开main.js 入口文件，发现Vue的实例化发生了一些变化，由先前的new关键词实例化，转变为createApp方法的调用形式
// vue2.x
new Vue({
el: '#app',
render: h => h(App)
})
 
// vue3.x
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
打开一个单文件组件发现，vue3.0的单文件组件中不再强制要求必须有唯一根元素
alt="Vue logo" src="./assets/logo.png"> msg="Welcome to Your Vue.js App"/>
组合式API
组合式api（Composition API）算是vue3对开发者来说非常有价值的一个api更新，先不关注具体语法，先对它有一个大的感知
composition vs options
options API开发出来的vue应用如左图所示，它的特点是理解容易，因为各个选项都有固定的书写位置，比如响应式数据就写到data选择中，操作方法就写到methods配置项中等，应用大了之后，相信大家都遇到过来回上下找代码的困境
composition API开发的vue应用如右图所示，它的特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便，设置如果功能复杂，代码量大，还可以进行逻辑拆分处理
特别注意：
  1. 选项式api和组合式api俩种风格是并存的关系 并不是非此即彼
  2. 需要大量的逻辑组合的场景，可以使用compition API进行增强
setup入口函数
  1. setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
  2. setup 中不能使用 this， this 指向 undefined
  3. setup函数只会在组件初始化的时候执行一次
  4. setup函数在beforeCreate生命周期钩子执行之前执行
响应式系统API
reactive 函数
作用：reactive是一个函数，接收一个普通的对象传入，把对象数据转化为响应式对象并返回
使用步骤
  1. 从vue框架中导入reactive函数
  2. 在setup函数中调用reactive函数并将对象数据传入
  3. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去
{{ state.name }}
{{ state.age }}
 
 
 
ref 函数
作用：ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象
使用步骤
  1. 从vue框架中导出ref函数
  2. 在setup函数中调用ref函数并传入数据（简单类型或者复杂类型）
  3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
  4. 注意：在setup函数中使用ref结果，需要通过.value  访问，模板中使用不需要加.value
总结说明：
  1. ref 函数可以接收一个简单类型的值，返回一个可改变的 ref 响应式对象，从而弥补reactive函数不支持简单类型的问题
  2. reactive和ref函数都可以提供响应式数据的转换，具体什么时候需要使用哪个API社区还没有最佳实践，大家暂时可以使用自己熟练的API进行转换
  3. 推荐一种写法：只有明确知道要转换的对象内部的字段名称我们才使用reactive，否则就一律使用ref，从而降低在语法选择上的心智负担
toRefs 函数
注意:经过reactive函数处理之后返回的对象，如果给这个对象解构或者展开，会让数据丢失响应式的能力，为了解决这个问题需要引入toRefs函数，使用 toRefs函数 可以保证该对象展开的每个属性都是响应式的
使用之前reactive函数的例子,如果想在模板中省略到state，直接书写name和age，你可能会想到，那我在return出去的时候把state中的属性解构.
{{ name }}
{{ age }}
 
 
点击改值按钮，发现视图已经不发生变化了，如果解构reactive的返回值，将破坏调用响应式特性，这时就需要使用toRefs方法进行处理了
经过toRefs包裹处理会发现,数据恢复了响应式特性
{{ name }}
{{ age }}
 
 
 
computed计算属性
作用：根据现有响应式数据经过一定的计算得到全新的数据
下面讲介绍如何在vue3中使用计算属性
使用步骤
  1. 从vue框架中导入computed 函数
  2. 在setup函数中执行computed函数，并传入一个函数，在函数中定义计算公式
  3. 把computed函数调用完的执行结果放到setup的return值对象中
{{ list }}
{{ filterList }}
 
 
 
生命周期函数
使用步骤
  1. 先从vue中导入以on打头的生命周期钩子函数
  2. 在setup函数中调用生命周期函数并传入回调函数
  3. 生命周期钩子函数可以调用多次
选项式API
组合式API
beforeCreate
不需要（直接写到setup函数中）
created
不需要（直接写到setup函数中）
beforeMount
onBeforeMount
mounted
onMounted
beforeUpdate
onBeforeUpdate
updated
onUpdated
beforeDestroyed
onBeforeUnmount
destroyed
onUnmounted
父子通信
在vue3的组合式API中，父传子的基础套路完全一样，基础思想依旧为：父传子是通过prop进行传入，子传父通过调用自定义事件完成
实现步骤
  1. setup函数提供俩个参数，第一个参数为props，第二个参数为一个对象context
  2. props为一个对象，内部包含了父组件传递过来的所有prop数据，context对象包含了attrs，slots， emit属性，其中的emit可以触发自定义事件的执行从而完成子传父
provide 和 inject
通常我们使用props进行父子之间的数据传递，但是如果组件嵌套层级较深，一层一层往下传递将会变的非常繁琐，有没有一种手段可以把这个过程简化一下呢，有的，就是我们马上要学习的provide 和 inject，它们配合起来可以方便的完成跨层传递数据
1. 基础使用
来个需求: 爷组件中有一份数据 传递给孙组件直接使用
实现步骤：
  1. 顶层组件在setup方法中使用provide函数提供数据
  2. 任何底层组件在setup方法中使用inject函数获取数据
事实上，只要是后代组件，都可以方便的获取顶层组件提供的数据
2. 传递响应式数据
provide默认情况下传递的数据不是响应式的，也就是如果对provide提供的数据进行修改，并不能响应式的影响到底层组件使用数据的地方，如果想要传递响应数据也非常简单，只需要将传递的数据使用ref或者reactive生成即可
掌握如何通过provide/inject传递响应式数据
 
 
 
模板中 ref 的使用
在模板中使用ref，我们都很清楚，它一般有三种使用场景
  1. ref + 普通dom标签  获取真实dom对象
  2. ref + 组件标签  获取组件实例对象
  3. ref + v-for 获取由dom对象（实例对象）组成的数组  （不经常使用）
实现步骤
  1. 使用ref函数传入null创建 ref对象 =>  const hRef = ref(null)
  2. 模板中通过定义ref属性等于1中创建的ref对象名称建立关联  =>  

     

  3. 使用 => hRef.value