1、生命周期
- Vue2 (选项式API)VS Vue3 (组合式API);
- v3的大部分周期函数在名字的前面都加上了 on 比如说v2中用的 beforeMount、mounted V3中 onbeforeMount、onMounted;
- V3用的是组合式API,使用的时候需要先引入;V2是选项式API 直接调用就可以了;
- 最后一对钩子函数的名换了,destory换成 onunmount;
- V3使用了setup,setup() 在beforeCreate钩子函数之前执行,写在script开始的标签内;
2、响应式原理
- V2用的是es5中的 Object.defineProperty 对数据getter和setter 进行劫持然后结合发布订阅模式来实现的;
- V3用的是es6的 proxy对数据代理,通过reactive()函数给每一个对象都包一层proxy,然后通过proxy监听属性的变化,实现对数据的监控;
2.1、扩展(可以说)
- Object.defineProperty 的缺陷 对象、数组的新增没有响应式,还有就是通过下标修改某个元素或者改变数组的长度都是没有响应式的。只有实例创建的时候 data 中的数据创建后才是响应式的,给创建好的 vue实例 data 对象添加属性的时候,数据会更新,但视图不会更新,是不具备响应式的;
-
proxy的优势
1、proxy的是es6新增的一中特性,所以的性能是优于Object.defineProperty;
2、V3支持更多数据类型的劫持;V2只支持object、Array;V3支持object、Array、Map、weakMap、set、weakSet;
3、V3 可以更准确的对数据进行一个劫持;V2会把整个data进行递归数据劫持,但是V3 只有在用到某个对象的时候,才进行数据劫持,所以V3的响应式更快内存占用少;
4、V3监听和操作的是原生数组;V2是通过重写的方法实现对数组的监控;
3、虚拟dom的创建
- v3的性能会比v2快1.2_2倍:
- 虚拟dom的创建:v2中,数据发生变化,会将模板进行重编译,生成所有的虚拟dom,v3中数据发生变化,看该虚拟dom是否参与更新,如果参与更新,创建新的虚拟dom,如果不参与更新,直接复用上一次的虚拟dom