Vue响应式原理

Vue响应式原理的核心内容是依赖收集和依赖更新。而以上两个功能是使用Object.defineProperty()来实现的，Object.defineProperty()使用其get和set方法实现依赖收集和依赖更新的。

Object.defineProperty(obj, property, {
    get() {
        // 依赖收集
    },
    set() {
        // 依赖更新
    }
});

依赖在Vue内部是一个数组，该数组里面保存一个个的Watcher。比如我们页面中可能会有{{name}}这种插值表达式，此时这里面的name就会产生一个Watcher，这个Watcher的作用就是在当数据发生变化时，来通知{{name}}更新。此外诸如computed, watch都会产生watcher。

当obj.property发生变化时，会触发set()，set会通知这个依赖数组，执行数组内部的每一个Watcher，从而更新视图。