1、vue2的响应式 vs vue3的响应式 (性能提升)
响应式系统升级
- vue2 中的 object.defineProperty(响应式系统的核心)
初始化的时候,会遍历data中的所有成员,使用defineProperty把对象的属性转换成get和set,如果该成员中的属性还是对象的话,需要递归处理每一个子对象的属性。这些都是在初始化的时候进行的。即使你没有使用到这个属性,那么也是会将该属性进行响应式处理。
复制代码
- vue3 proxy
proxy的性能本身就比defineProperty要好, 另外,代理对象可以拦截属性的访问、赋值、删除等操作,不需要初始化时遍历所有的属性。另外,如果有多层属性嵌套的话,只有访问某个属性的时候,才会递归处理下一级的属性。使用proxy默认就可以监听到动态新增的属性,可以监听到删除的属性。可以监听数组的索引和length属性。
复制代码
总结: vue3使用的proxy对象提升了响应式系统的性能和功能
2、模板语法
打开App.vue文件,唯一和Vue2不同的是:Template不再强调一定要有根标签了。
3、生命周期函数对比
1)首先需要了解生命周期是什么?
Vue实例从创建到销毁的过程,就是Vue实例的生命周期。
这个过程包括数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。
2)具体函数对比