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

时间 2019-11-24

标签 mvvm 架构双向数据绑定劫持模块 object.defineproperty object defineproperty 栏目系统架构繁體版

原文原文链接

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

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

文件：Observer.js

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(); // 通知全部人数据更新了
                }
            }
        });
    }
}复制代码

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

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

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