你准备好拥抱vue3.0了吗

前言本月21号晚上看了友达的直播，感觉vue3.0离我们越来越近了。预计年中正式发布。3.0的变化确实很大。性能提升了很多，很多东西也依赖于react。为了快速转入当时vue3.0的阵营，从现在开始熟悉新特性是很有必要的。如果想在v2.x中使用3.0的内容，可以在main.js中通过npminstall'@vue/composition-api'引入importVueCompositionApifrom'@vue/composition-api'；Vue.use(VueCompositionApi);数据的双向绑定V2.x中数据的双向绑定是通过对象的defineProperty方法实现的，通过属性中的get和set方法进行拦截操作。但是它不能监听数组的变化，除了以下方法：push(),pop(),shift(),unshift(),splice(),sort(),reverse()，如果直接使用设置数组的索引某项不能更改。V3.x中使用proxy和Reflect实现双向绑定。它可以从更多方面监控对象的变化。除了set和get，它还提供apply、setPrototypeOf、getPrototypeOf、deletePrototype、isExtensible、preventExtensions、getOwnPropertyDescriptor、defineProperty、has、ownKeys、construct方法监控。proxy的实际应用我会在后面讲解。本期重点介绍VU3.0的实践，直接举例。如果你是第一次看到上面的写法可能有点奇怪，这是vue3.x中的写法。在v2.x中，data、methods、computed、watch等都写在v3.x中一个名为setup的函数中。在里面我们可以任意定义变量、函数等，最后通过return返回，返回的内容可以在模板中使用。在v3.x中对绑定的数据进行了更详细的分类，可以分为以下三种：constdoubleVal=ref(1)，使用doubleVal.value改变双向绑定：需要用reactive，使用state.stateVal改变value下面一一解释：单向绑定，你就知道了没有通过监听名称Feature或function的双向绑定，只会在视图初始化的时候绑定一次，即使后面这个变量发生变化，视图也不会更新。从控制台可以看出，singleVal的值确实发生了变化，但是在界面中一直显示为1。变量声明的方法和我们平时声明一个变量是一样的，比如：让singleVal=1，最后在return中return。对于单个双向绑定，一次只能声明一个双向绑定变量，通过ref函数创建一个wrapper对象，使其包含responsive属性值。例如上面的constdoubleVal=ref(1)。如果要改变它的值，需要改变的是它的属性值上的值，比如这个doubleVal.value++。双向绑定通过reactive创建响应式对象。这样创建的对象不是包装对象，所以不需要使用.value来获取值。它相当于Vue2.x的Vue.observable。conststate=reactive({stateVal:1})return{...state}直接解构reactive内容返回，会造成响应性的损失。需要使用toRefs将reactive对象转化为普通对象，让result对象的每个属性都指向原对象中对应属性的ref引用对象，保证在使用对象解构时不会丢失响应性或扩展运算符。对于事件方法，就像声明一个变量一样，在setup中声明，在return中返回。computed属性引入了computed方法返回计算值。这里我们用上面的例子用total计算上面三个数的和。import{computed,ref,reactive,toRefs}from'@vue/composition-api'exportdefault{setup(){...consttotal=computed(()=>{returnsingleVal+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);})...在vue3.0的生命周期中取消了beforeCreate和created循环，因为setup会在这个循环之前执行，所以你可以在setup中做你需要做的事情。所有其他生命周期都以on开始。import{onBeforeMount,onMounted,onBeforeUnmount,onBeforeUpdate,onDeactivated,onUnmounted,onUpdated}from'@vue/composition-api'exportdefault{setup(){onBeforeMount(()=>{console.log('onBeforeMount');})onMounted(()=>{console.log('onMounted');})onBeforeUnmount(()=>{console.log('onBeforeUnmount');})onBeforeUpdate(()=>{console.log('onBeforeUpdate');})onDeactivated(()=>{console.log('onDeactivated');})onUnmounted(()=>{console.log('onUnmounted');})onUpdated(()=>{console.log('onUpdated');})}}在Mixinvue3.0中，使用函数式API代替了原来的mixin，很容易造成名称重叠，覆盖mixin中引入的页面属性。它在vue3.0中以API的形式存在，需要的时候可以引入。直接看例子mixin.vuesearchName.jsimport{reactive,toRefs}from'@vue/composition-api'exportdefaultfunctionsearchName(names){conststate=reactive({names:names,searchValue:''})constonSearch=()=>{state.names.forEach(name=>{name.show=name.value.includes(state.searchValue)})}return{...toRefs(state),onSearch}}上面我们将搜索功能分离到了一个js文件中，并在searchName.js中定义了一些属性和方法。这里的属性还有Responsive，最后返回这些内容。在组件中，首先引入js文件，调用searchName方法，传入需要的参数。该组件中的searchValue和names这两个响应数据不是自己拥有的，而是来自searchName.js。从下面的演示中可以看出，它们确实具有响应功能。EventBussetup接收两个参数props:相当于V2.x中的props:{}，用于接收父组件传过来的参数ctx:context。在2.x中，this指向全局的VUE实例，可以通过this.$router、this.$commit、this.$emit等方法进行路由跳转等操作。在3.0中，不能直接访问它。如果你尝试输出它，你会看到它的值是未定义的。但是可以通过ctx.root.$root.$emit把内容挂在$root上，这样就可以在任何地方访问了。setup(props,ctx){...consttotal=computed(()=>{让total=singleVal+doubleVal.value+state.stateValctx.root.$root.$emit('handleClick',{number:total})返回总数})...}...ctx.root.$root.$on('handleClick',(val)=>{console.log('我通过ctx.root.$root.$on触发了，接收到的值为：'+val.number);state.otherTotal=val.number})...最后附上composition-api的github：https://github.com/vuejs/composition-api网站:www.dengzhanyong.com