本月21号晚上看了尤大大的直播,感觉vue3.0离我们越来越近了,预计年中正式发布,3.0的改变的确很大,性能提升了很多,很多东西也在靠向react。为了到时可以很快的转入vue3.0的阵营,从现在开始熟悉新的特性是很有必要的。
如果你想在v2.x中使用3.0的内容,可通过以下方式
npm install '@vue/composition-api'
在main.js中引入
import VueCompositionApi from '@vue/composition-api'; Vue.use(VueCompositionApi);
数据的双向绑定
V2.x中的数据双向绑定是通过object的defineProperty方法实现的,通过属性中的get和set方法中进行拦截操作。但是它无法监听数组的改变,除了使用以下几种方法可以:push()、pop()、shift()、unshift()、splice()、sort()、reverse(),如果直接使用index设置数组的某一项时是无法改变的。
V3.x中改用了proxy和Reflect实现双向绑定,它可以从更多方面对对象的变化进行监听,除了set 和 get 外,还提供了apply、setPrototypeOf、getPrototypeOf、deletePrototype、isExtensible、preventExtensions、getOwnPropertyDescriptor 、defineProperty、has、ownKeys、construct方法的监听。
对于proxy的实际应用我将在后期专门来讲解,本期以VU3.0的实践为主
直接上一斤的例子
<template> <div> <h3>数据绑定</h3> <div> <el-button @click="clicksingleVal"> 单向绑定 {{singleVal}} </el-button> <el-button @click="clickdoubleVal"> 双向绑定 {{doubleVal}} </el-button> <el-button @click="clickstateVal"> 状态绑定 {{stateVal}} </el-button> </div> </div> </template> <script> import {ref, reactive, toRefs} from '@vue/composition-api' export default { setup(){ let singleVal = 1 const doubleVal = ref(1) const state = reactive({ stateVal: 1 }) const methods = { clicksingleVal(){ singleVal++ console.log(singleVal); }, clickdoubleVal(){ doubleVal.value++ }, clickstateVal(){ state.stateVal++ }, } return{ singleVal, doubleVal, ...toRefs(state), ...methods } } } </script> <style> </style>
如果你是第一次看到上面的写法可能会有点陌生,这就是在vue3.x中的写法。在v2.x中的data、methods、computed、watch等内容,在v3.x中全部都写在一个叫 setup 的函数中。在里面我们可以任意的定义变量、函数等,最后通过return返回,返回的内容可以在模板中进行使用。
对于绑定的数据在v3.x中进行了更加详细的分类,可以分为以下三种:
单向绑定:var singleVal = 1,数据会变化,但是视图不会更新
单个双向绑定:const doubleVal = ref(1),使用 doubleVal.value 改变
双向绑定:需要使用 reactive ,使用 state.stateVal 改变值
我们来逐个的进行讲解:
单向绑定,听名字就可以知道它并不具有双向绑定的特性或功能,它只会在视图初始化时绑定一次,这个变量即使后面发生了改变,视图也不会更新。可以从控制台看到singleVal 的值的确发生了变化,但界面中始终显示的为1。变量声明的方法和我们平时声明一个变量一样,如:let singleVal = 1,最后在return中返回。
单个双向绑定,每次只能声明一个双向绑定的变量,通过ref函数创建一个包装对象,使它包含一个响应式的属性value。例如上面的const doubleVal = ref(1)。如果要改变它的值,需要改变的是它的属性value上的值,像这样一样doubleVal.value++。
双向绑定,通过reactive创建一个响应式的对象,这样创建的对象并不是一个包装对象,因此不需要使用.value来取值,它等价于 Vue 2.x 的Vue.observable。
const state = reactive({ stateVal: 1 }) return { ...state }
对reactive的内容直接进行解构后返回,会导致响应式丢失,需要使用toRefs将reactive对象转为普通对象,这样结果对象上的每个属性都指向原始对象中对应属性的ref引用对象,保证了在使用对象解构或拓展运算符时响应式不会丢失。
对于事件方法,就和声明一个变量一样,在setup中声明,在return返回即可。
计算属性
引入computed方法,返回计算后的值,这里接着使用上面的例子,用total计算上面3个数的总和。
import {computed, ref, reactive, toRefs} from '@vue/composition-api' export default { setup(){ ... const total = computed(() =>{ return singleVal + doubleVal.value + state.stateVal }) ... return{ ..., total } } }
从演示效果中我们还可以看出一点,单向绑定的数据改变不会触发计算属性方法。
数据监听
同样还是写在setup中,也比较简单,没有什么可讲解的
import {computed, ref, reactive, toRefs, watch} from '@vue/composition-api' ... watch(() => state.stateVal, (newVal, oldVal ) =>{ console.log(newVal, oldVal); }) ...
生命周期