Vue.js 3.0源码解析(微课视频版)
上QQ阅读APP看书,第一时间看更新

1.2.2 代理方式变化

Vue3通过Proxy对象代理数据源的方式实现响应式API。相较于Vue2使用的Object.defineProperty,Proxy对象是一个真正的对原对象的代理(Object.defineProperty属于hack方式使用),通过Proxy对象实现数据响应能够带来更好的性能提升。

在Vue2中初始化数据时,需递归遍历data对象中的所有层级数据,再逐个设置每个data对象中数据的setter和getter。Vue3采用的Proxy默认为浅代理,在初始化响应式数据时,不进行深层次代理,将递归代理深层次属性的过程放在getter阶段,从而带来更好的性能提升。

在Vue2中响应式数据有一些问题:不能检测对象属性的添加或者删除;通过索引修改数组值或数组长度不触发响应式更新,必须使用vue.$set方法手动设置。这些问题是因为使用Object.defineProperty代理造成的,在Vue3中使用Proxy代理后,上述问题都已解决。