09-02：JS 监听对象属性的改变

JavaScript020

09-02：JS 监听对象属性的改变,第1张

我们假设这里有一个 user 对象,

(1)在 ES5 中可以通过 Object.defineProperty 来实现已有属性的监听

缺点：如果 id 不在 user 对象中，则不能监听 id 的变化

(2)在 ES6 中可以通过 Proxy 来实现

这样即使有属性在 user 中不存在，通过 user.id 来定义也同样可以这样监听这个属性的变化哦。

在日常工作中我们经常会遇到某个变量依赖另一个变量的问题，但我们有时会像下边这样 当向上面这种情况时，其实我们想的是变量b随着变量a去变化，但事实上并非如此，我们需要去监听变量a,当a发生变化时，我们需要b随之发生变化。这时有一个比较好的处理方法，其实类似于vue的双向数据绑定原理，利用Object.defineProperty()，本身对对象的每个属性进行监听，其实就相当于给对象的每个对象设置一个setter和getter,当对对象进行操作时，我们同时激活相应的函数，在这个情境下，我们可以将本身改变的变量a作为对象中的这样一个属性或者一个属性去承载这个变量，当a发生变化时，我们可以触发set函数，这样我们把依赖a的b的表达式写在set函数中，这样就做到了完美的监听 这样就完成了真正的随之改变，就好像vue的双向绑定原理