vue响应式原理

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。

Vue的响应式原理其实就是通过 Object.defineProperty() 方法结合发布者订阅者模式来实现的。

具体步骤为：vue获取当前data中的全部数据，通过 defineProperty() 方法劫持数据，发生数据变化时，其中的set方法被触发，set方法会通知观察者 watcher 触发生成新的虚拟DOM树，vue框架会比对新旧虚拟DOM树的区别，执行加载。

const data = {
    foo: 123,
    bar: 456
};

Object.keys(data).forEach(key => {
    let value = data[key];

    Object.defineProperty(data, key, {
        set(newValue) {
            console.log('触发更新数据', key);
            value = newValue;
        },
        get() {
            console.log('触发获取数据', key);
            return value;
        }
    })
})

Object.defineProperty() 方法监听对象属性改变后，将通知 watcher。

// 发布者
class Dep {
    constructor() {
        // 存放 watcher对象
        this.subs = [];
    }

    /** 添加watcher */
    addSub(sub) {
        this.subs.push(sub);
    }

    notify() {
        this.subs.forEach(sub => {
            sub.update();
        })
    }
}

// 订阅者
class Watcher {
    constructor(name) {
        this.name = name;
    }

    update() {
        console.log('触发更新数据', this.name);
    }
}

let dep = new Dep();

const w1 = new Watcher('foo');
dep.addSub(w1);

dep.notify();  // 触发更新数据 foo

结合以上实例就能明白为什么 vue的响应式仅能监听在创建实例前的数据，而无法监听创建后的。原因就是，在解析数据的过程中，vue已经针对数据做了绑定，而后期添加的数据无法触发此种绑定。