vue3.0体验卡

前言

vue3.0 Rc（候选发布版本）已经于7月18上线，离正式版本发布已经不远了，鉴于此，本人就通过@vue/composition-api 这个 Vue Composition API 来事先体验下3.0的新特性，为以后能快速上手新版本做准备。

准备工作

下载与引入

• 下载体验版api

 npm i @vue/composition-api

• 引入与使用

 1. 在main.js中要引入全部的api
 
 import VueCompositionApi from '@vue/composition-api'

 Vue.use(VueCompositionApi)
 
 2. 在页面中按需引入api
 
 import { 需要使用的api } from '@vue/composition-api'

tips: main.js和局部页面都需要引入，不能只在页面中引入。

开发与使用

reactive和toRefs

reactive创建响应式数据，toRefs把普通数据转换成响应式数据

tips:

1. 在setup中是没有this的
2. 数据、方法都写在setup里面。
3. 方法里改变值需return这个值
4. 用了...运算符后使用reactive创建出来的数据都不是响应式数据了,需要使用toRefs转换为ref()类型的响应式数据

ref(推荐)

• 和reactive一样创建响应式数据，但更推荐使用。

• 模板上的ref--获取dom

//父组件

 //子组件
 

tips:

1. ref括号里的值就是refCount的值，括号里的值可以是各种类型的值。
2. 在setup要通过xxx.value获取ref转换的值。
3. 模板中无需通过xxx.value展示数据，直接{{xxx}}即可，在return时已经进行了转换了。
4. ref包裹创建出来的值是个对象,里面就一个属性value。
5. 用reactive包裹ref创建的值不需要通过XXX.value访问
6. 新的ref会覆盖旧的ref的值
7. 通过isRef可以判断是否是ref创建出来的。

computed

计算属性:可创建可读可写的计算属性。

watch

监听数据的变化

tips:

1. ref和reactive的值的监听方法不同，reactive需用方法返回值，() => xxx，ref可直接使用。
2. 当监听多个时，不管是ref还是reactive创建的值，都需要用方法返回
3. 在监听多个值时，用数组来解构新旧值时，新值和旧值分别在不同的数组里，和vue2.x不一样。
4. watch监听返回新值、旧值时还返回了个函数，当前函数在watch被重复执行和stop操作时发生，可做些清除操作。常见应用场景有防抖。
5. 防抖：就是对于频繁触发的事件添加一个延时同时设定一个最小触发间隔，如果触发间隔小于设定的间隔，则清除原来的定时，重新设定新的定时；如果触发间隔大于设定间隔，则保留原来的定时，并设置新的定时；防抖的结果就是频繁的触发转变为触发一次

生命周期

• beforeCreate -> setup()
• created -> setup
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

tips：

1. 去除了beforeCreate和created生命周期，直接就在setup中，setup执行顺序 是beforeCreate后，created前
2. 其他生命周期就在原本前加上on，功能没有什么变化，且定义在setup函数中
3. 推荐请求都放在onMounted中

依赖注入

• provide

//父组件

 //子组件
 

• inject

//孙子组件

路由跳转

tips: root指代的就是vue对象,即this，且名字是不可更改的。

props

//父



//子

未完待续~~~~