网站设计任务书范文,重庆专业网站建设公司哪家好,易点设计,网站备案人可以改吗vue2和vue3的区别有以下8点#xff1a;
1、双向数据绑定原理不同#xff1b; 2、是否支持碎片#xff1b; 3、API类型不同#xff1b; 4、定义数据变量和方法不同#xff1b; 5、生命周期钩子函数不同#xff1b; 6、父子传参不同#xff1b; 7、指令与插槽不同#x…vue2和vue3的区别有以下8点
1、双向数据绑定原理不同 2、是否支持碎片 3、API类型不同 4、定义数据变量和方法不同 5、生命周期钩子函数不同 6、父子传参不同 7、指令与插槽不同 8、main.js文件不同。
1、双向数据绑定原理不同
vue2vue2的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持结合发布订阅模式的方式来实现的。
vue3vue3中使用了ES6的Proxy API对数据代理。相比vue2.x使用proxy的优势如下 defineProperty只能监听某个属性不能对全对象监听 可以省去for in闭包等内容来提升效率(直接绑定整个对象即可) 可以监听数组不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。
2、是否支持碎片
vue2vue2不支持碎片。
vue3vue3支持碎片Fragments就是说可以拥有多个根节点。
3、API类型不同
vue2vue2使用选项类型api选项型api在代码里分割了不同的属性data,computed,methods等。
vue3vue3使用合成型api新的合成型api能让我们使用方法来分割相比于旧的api使用属性来分组这样代码会更加简便和整洁。
4、定义数据变量和方法不同
vue2vue2是把数据放入data中在vue2中定义数据变量是data(){}创建的方法要在methods:{}中。
vue3vue3就需要使用一个新的setup()方法此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据
(1) 从vue引入reactive (2) 使用reactive() 方法来声明数据为响应性数据 (3) 使用setup()方法来返回我们的响应性数据从而template可以获取这些响应性数据。
5、生命周期钩子函数不同
vue2vue2中的生命周期
beforeCreate 组件创建之前 created 组件创建之后 beforeMount 组价挂载到页面之前执行 mounted 组件挂载到页面之后执行 beforeUpdate 组件更新之前 updated 组件更新之后
vue3vue3中的生命周期
setup 开始创建组件 onBeforeMount 组价挂载到页面之前执行 onMounted 组件挂载到页面之后执行 onBeforeUpdate 组件更新之前 onUpdated 组件更新之后
而且vue3.x 生命周期在调用前需要先进行引入。除了这些钩子函数外vue3.x还增加了onRenderTracked 和onRenderTriggered函数。
6、父子传参不同
vue2父传子用props,子传父用事件 Emitting Events。在vue2中会调用this$emit然后传入事件名和对象。
vue3父传子用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
7、指令与插槽不同
vue2vue2中使用slot可以直接使用slotv-for与v-if在vue2中优先级高的是v-for指令而且不建议一起使用。
vue3vue3中必须使用v-slot的形式vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句不会相互冲突vue3中移除keyCode作为v-on的修饰符当然也不支持config.keyCodesvue3中移除v-on.native修饰符vue3中移除过滤器filter。
8、main.js文件不同
vue2vue2中我们可以使用pototype(原型)的形式去进行操作引入的是构造函数。
vue3vue3中需要使用结构的形式进行操作引入的是工厂函数vue3中app组件中可以没有根标签。
setup()函数特性
1、setup()函数接收两个参数props、context(包含attrs、slots、emit)。
2、setup函数是处于生命周期beforeCreated和created俩个钩子函数之前。
3、执行setup时组件实例尚未被创建在setup()内部this不会是该活跃实例得引用即不指向vue实例Vue为了避免我们错误得使用直接将setup函数中得this修改成了undefined。
4、与模板一起使用时需要返回一个对象。
5、因为setup函数中props是响应式得当传入新的prop时它将会被更新所以不能使用es6解构因为它会消除prop得响应性如需解构prop可以通过使用setup函数中得toRefs来完成此操作。
6、在setup()内使用响应式数据时需要通过 .value 获取。
7、从setup() 中返回得对象上得property 返回并可以在模板中被访问时它将自动展开为内部值。不需要在模板中追加.value。
8、setup函数只能是同步的不能是异步的。
