引用:Vue源码解读-数据的双向绑定简陋版(仅用于原理说明)

有两个Object.defineProperty,一个在Vue.prototype._proxy,另一个在defineReactive,下面分别说明下这两个Object.defineProperty的作用

第一个Object.defineProperty,用于代理通过new Vue()创建出的实例对象,即demo,修改demo属性的值,会触发相应的setter。
而第二个Object.defineProperty,用于检测data(存储于demo._data)本身的改变。

1
2
demo.a = 456;
demo._data.a = 321;

以上代码

  1. demo.a,是在demo实例对象上设置属性,会先触发第一个setter,第一个setter中(set: (val) => this._data[key] = val),由于设置了data对象,会接着触发第二个setter
  2. demo._data.a,并没有在demo实例对象上设置属性,所以只会触发第二个setter

浏览器可运行代码见:“Vue源码解读-数据的双向绑定”一文源码,转写为浏览器可用代码