MVVM 架构 双向数据绑定（数据劫持模块Object.defineProperty）

数据劫持 Observer 类的实现(暂时先说数据劫持，后续其他功能再补充，尽量说完整个VUE的MVVM实现)

还记得实现 MVVM 类的时候就创建了这个类的实例，当时传入的参数是 MVVM 实例的 data 属性，在 MVVM 中把数据通过 Object.defineProperty 挂到了实例上，并添加了 getter 和 setter，其实 Observer 类主要目的就是给 data 内的所有层级的数据都进行这样的操作。

文件：Observer.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 复制代码

class Observer { constructor (data) { this.observe(data); } // 添加数据监听 observe(data) { // 验证 data if(!data || typeof data !== 'object') { return; } // 要对这个 data 数据将原有的属性改成 set 和 get 的形式 // 要将数据一一劫持，先获取到 data 的 key 和 value Object.keys(data).forEach(key => { // 劫持（实现数据响应式） this.defineReactive(data, key, data[key]); this.observe(data[key]); // 深度劫持 }); } // 数据响应式 defineReactive (object, key, value) { let _this = this; // 每个变化的数据都会对应一个数组，这个数组是存放所有更新的操作 let dep = new Dep(); // 获取某个值被监听到 Object.defineProperty(object, key, { enumerable: true, configurable: true, get () { // 当取值时调用的方法 Dep.target && dep.addSub(Dep.target); return value; }, set (newValue) { // 当给 data 属性中设置的值适合，更改获取的属性的值 if(newValue !== value) { _this.observe(newValue); // 重新赋值如果是对象进行深度劫持 value = newValue; dep.notify(); // 通知所有人数据更新了 } } }); } }复制代码