vue核心原理-监测数据变化

我们实际开发中发现，在data中定义的所有数据，后续无论是在template中使用，还是在methods中使用，都能随着数据的变化而变化。为了理解这其中的原理，研究源码后整理出这篇文章，欢迎大家及时指正。
第一步：数据注册监听
vue 2.x 版本使用的是 Object.defineProperty 详细API文档见Object.defineProperty
用于绑定Object类型数据，比如定义一个person:
let person = {
name: ‘usm’,
age: 12
}
复制代码现在希望person的name和age发生改变时，可以触发一些操作，就可以通过 Object.defineProperty 实现：
Object.defineProperty(person, ‘name’, {
enumerable: true,
configurable: true,
get() {
console.log(‘get name’s value’);
},
set(val) {
console.log(set value ${val});
}
});

person.name // get name’s value
person.name = ‘new’ // set value new
复制代码其中enumerable属性表示此属性设置为可枚举，configurable表示此属性可被修改/删除。
至此，person对象中的name属性发生读/写操作时，都可以被监听到，并执行对应的代码。
回到源码，vue中实现了一个Observer对象，用