Vue2.X响应式:
- 需要遍历对象的每一个属性,调用defineProperty,把属性转换成getter/setter,性能不如Vue3.X
- 无法监听删除操作,例如 delete data.name,只能通过Vue.delete这种额外的方法操作
- 无法直接给对象动态增加响应式成员,需要调用Vue.set()
- 数组的响应式需要特殊处理
- Vue2.X在程序启动的时候首先需要遍历所有的属性,设置gettersetter,属性嵌套层级比较多的话,消耗性能
Vue3.X响应式:
- 性能比Vue2.X提升,使用了Proxy 不需要遍历对象的所有属性(性能提升,Proxy)
- 数组天生支持,可以监听数组的length和索引
- 可以监听属性的删除操作
- 因为使用Proxy可以监听到动态成员
- Vue3.X是懒处理,程序启动的时候只是创建了一个代理对象,当访问某个属性的时候才会为这个属性收集依赖