Vue3新特性

Vue3 新特性

Vue3已经发布了，虽然没有看发布的版本，但是我看了发布前的一些已经公布的Vue3新特性，其中主要的是composition-api

composition-api

使用composition-api这个模块需要使用

• setup()函数

  setup() 函数 ， 专门为属性所提供的新属性，它为Vue3的 Composition API 新特性提供了统一的入口
  setup() 函数会有两个参数

  • setup()函数的第一个参数是一个对象 可以获取到属性传值的值 – 前提是必须在Vue组件里的props对象上先声明一些才能获取的到
  • setup()函数的第二个参数是 ctx 上下文对象 这个概念和koa有点类似 可以一次获取我们平时需要使用 this 才能获取到的一些对象数据

  • setup() 函数的执行时间 会在 beforeCreate() 之后 created() 之前
    
    
  • setup() 函数第一个参数
    第一个参数主要是用来获取属性传值，在使用之前必须现在Vue的props属性中先声明，才能在setup函数的第一个参数中获取到。
    
  • setup()函数第二个参数
    setup()函数的第二个参数是 ctx 上下文对象 这个概念和koa有点类似 可以一次获取我们平时需要使用 this 才能获取到的一些对象数据。
    在setup() 函数里面也是没有办法获取到this，简单的理解就是 ctx 替代了 this
    
    

• reactive()函数

  reactive() 函数， 用来创建响应式的数据对象
  vue2.x 组件的数据是定义在 data 里面的 vue3中可以将组件的数据定义在 reactive()函数中
  注意： 这个函数要在setup() 函数里面使用的 并且使用之前需要先在 ‘@vue/composition-api’ 下引入

  • 外部要访问这个对象里面的数据 就必须要将这个对象给 return 出去
  • 使用起来就可以简单的理解成 这个return 出去的对象的使用方法 和原先 data(){} return 出去的对象一样的使用方法就行

  
  
  在HTML部分使用
  

ref的使用

ref()函数和reactive()函数的作用类似，都可以创建作为外界响应式的变量，但是在使用的优先级上是ref()>reactive()
使用细节：

• 在内部需要直接访问的时候需要通过 .value 来获取
• Vue 做了默认的封装 return出去的时候相当于默认做了一层解构赋值 外部可以直接使用 ref 修饰过的对象来获取值
• setup里面的数据外部需要访问都需要 return 出去

• ref()函数与reactive()函数的区别：

1. reactive()函数一次创建的是一个对象 如 const state = reactive({ number:1,age:11 }) 一次性可以创建很多值
2. ref() 函数一次性只能创建一个值 如： const number = ref(0)

• 使用案例：
  

isRefs()函数的使用

isRef() 函数 传递一个参数 如果该参数是通过 ref 创建出来的响应式数据 则返回true

toRefs()函数的使用

当setup()函数一次性要返回数据、方法等布置一个数据的时候，这时候使用reactive()函数创建的缺陷就体现出来了，一个方法只能有一个return语句，又没有办法写在一起return， 所以只能这时候只能将reactive()创建的响应式对象拆开，但是拆开这些属性就缺失了响应式的功能，所以这时候就需要toRefs()方法将单个数据转成响应式对象，这个也就是为什么ref()使用的优先级比较高了。

当有多个数据需要访问的时候 就可以使用 toRefs() 函数 将数据转换成单个的响应式数据 再统一的返回

computed计算属性的使用

总体上和Vue2.x的功能是一个功能，只是写的方法改变了，添加了只读计算属性，和可读可写计算属性的概念，

• 只读的时候就正常的在computed()中通过箭头函数的方式设置值就再返回即可
• 如果是可读可写，就需要再computed()函数中传递一个对象，同时这个对象是有get和set来分别做读写功能的描述

watch()函数的使用

Vue3中的 watch 的功能 还是我们理解的那个watch的功能 和 Vue2x 是一样的 只是功能变得更加的强大

1. 的第一个参数存放的是监听变量的值
   如果是ref创建的直接输出创建的对象就行 如果是reactive创建的对象需要使用箭头函数导
   当一次监听多个变量的时候 第一个对象可以以数组的形式写入
2. watch第二个参数是一个函数有三个形参，分别是 新值、 旧值 和 清楚函数
   如果是传递多个参数的时候 新值和旧值是可以通过解构赋值的方式分别导出的
   清楚函数可以 清楚掉这个监听器的上次未完成的异步任务
3. 第三个参数 {lazy:true/false} 分别表示的是页面一刷新会不会就执行一次watch监听

• 基础使用：
  
  
• 清楚watch监听

watch 的声明周期默认是在函数组件被创建到组件被销毁的过程，我们也可以中途的取消掉 watch
watch是一个函数 有一个返回值 我们只要以函数的形式执行以下 watch() 的返回值就能关闭掉 watch() 的监听
使用的 过程和方式 和我们使用定时器和关闭定时器的过程是一样的

• 清楚watch未完成的异步任务

watch() 的第二哥参数是一个函数 这个函数有三个参数 分别是 新值 旧值 清楚函数
清楚函数可以 清楚掉这个监听器的上次未完成的异步任务

防抖案例:

Vue3 生命周期函数

在Vue3的版本和Vue2版本不同的地方在于 Vue3 是将生命周期函数 全部都统一的写在 setup()函数里面
并对名字做了一些修改 都加上了on关键字 如 mounted() 现在变成 onMounted()方法，
并且都是以在里面传递函数的形式来执行的
其中有一个小注意点就是 我们发请求的事件 都应该写在mounted()里面，vue3就都应该写在onMounted()函数里面，这个是官方推荐的写法，因为如果写在created()里面，在使用服务端渲染的时候会出现一些问题。

• 具体的声明周期函数有:
  
• 使用方式
  

provide()、inject()

使用 provide inject 可以实现跨越父子之间的传值
比如父组件要给孙组件传值， 就可以在父组件用 provide(键,值) 的方式声明一个 其后代组件都可以使用的值
它的后代组件就可以使用 inject(键) 的方式来获取这个共享的值
使用方式就和 浏览器缓存 locoalStroage 的使用方式是类似的
使用了这个新特性之后 我们就可以不用一层一层的 props 组件传值， 当然这个也不是唯一的选择 Vuex 和其他的模式还是可以使用的

• 案例Demo
  
  
  

Ref引用页面DOM元素和组件

ref除了可以创建响应式的数据意外，还可以对页面的DOM元素和组件进行引用，这点和Vue2是一样，Vue2也是有ref，
Vue3只需要保证html标签结点的ref值和我们自己创建的ref是同一个值，即可绑定引用。

• 绑定引用
  
  
• 绑定组件
  

总结

Vue3的一些比较会用的到的特性都已经总结完毕了，需要注意的点如下：

• setup()函数很重要，操作基本都在这里面完成
• 定义响应式变量的时候尽量都使用ref来定义，在setup()里面要使用用ref的值需要.value才能访问到，在html部门可以直接访问。
• watch()事件监听现在更加强大，能够一次性的监听多个对象，（需要使用解构赋值）、和清楚上次监听的一些异步任务
• 生命周期函数函数全部都写在setup内部，并且周期的名字都加了on,如onMounted()
• provide,inject真的很好用，很方便的组件传值
• Ref引用DOM，和引用组件的细节就是要保证ref的值和我们用ref创建的值要保持一致。