我刚上手 Vue2.x 的时候就经常遇到一个问题,数据更新了啊,为何页面不更新呢?什么时候用$set
更新,什么时候用$forceUpdate
强制更新,你是否也一度陷入困境。后来的学习过程中开始接触源码,才知道一切的根源都是 Object.defineProperty
。
Object.defineProperty
只能劫持对象的属性, 而 Proxy
是直接代理对象
由于Object.defineProperty
只能劫持对象属性,需要遍历对象的每一个属性,如果属性值也是对象,就需要递归进行深度遍历。
但是 Proxy
直接代理对象, 不需要遍历操作
Object.defineProperty
对新增属性需要手动进行Observe
因为Object.defineProperty
劫持的是对象的属性,所以新增属性时,需要重新遍历对象, 对其新增属性再次使用Object.defineProperty
进行劫持。也就是 Vue2.x 中给数组和对象新增属性时,需要使用$set
才能保证新增的属性也是响应式的, $set
内部也是通过调用Object.defineProperty
去处理的。