vue 数据双向绑定原理

https://yq.aliyun.com/articles/610372

Compile
解析 指令 ，添加watch池。
Observer
Object.defineProperty()重写数据的get、set

   myVue.prototype._observer = function (obj) {
        var _this = this;
        Object.keys(obj).forEach(key => { // 遍历数据
            _this._watcherTpl[key] = { // 每个数据的订阅池()
                _directives: []
            };
            var value = obj[key]; // 获取属性值
            var watcherTpl = _this._watcherTpl[key]; // 数据的订阅池
            Object.defineProperty(_this._data, key, { // 双向绑定最重要的部分 重写数据的set get
                configurable: true,  // 可以删除
                enumerable: true, // 可以遍历
                get() {
                    console.log(`${key}获取值：${value}`);
                    return value; // 获取值的时候 直接返回
                },
                set(newVal) { // 改变值的时候 触发set
                    console.log(`${key}更新：${newVal}`);
                    if (value !== newVal) {
                        value = newVal;
                        watcherTpl._directives.forEach((item) => { // 遍历订阅池 
                            item.update();
                            // 遍历所有订阅的地方(v-model+v-bind+{{}}) 触发this._compile()中发布的订阅Watcher 更新视图  
                        });
                    }
                }
            })
        });
    }

_watcherTpl
（watch池）收集订阅