Vue 2 响应式原理
Vue 2 的双向数据绑定基于发布订阅者模式结合数据劫持。要理解其运作机制,需拆解为三个核心环节:发布订阅模式、数据劫持以及二者的结合。
发布订阅者模式
通俗来说,这就像是一个消息通知系统。当某个数据发生变化时,系统会通知所有订阅了该数据的观察者。技术层面,我们通常将其抽象为一个 Dep 类,包含三个部分:
- 容器:用于存储每个目标变量对应的事件数组。
- 订阅方法:将观察者函数添加到容器中。
- 发布方法:触发容器中存储的所有观察者函数。
let Dep = {
clientList: {},
listen(key, fn) {
(this.clientList[key] || (this.clientList[key] = [])).push(fn);
},
trigger(...args) {
const key = args.shift();
const fns = this.clientList[key];
if (!fns || fns.length === 0) return;
for (let i = 0, fn; fn = fns[i++]; ) {
fn.apply(this, args);
}
}
};
数据劫持
数据劫持的核心是 Object.defineProperty。它允许我们在获取(get)和设置(set)对象属性时进行拦截。Vue 利用这一点监听 data 中属性的变化。
let value = '';
const obj = {};
Object.defineProperty(obj, 'age', {
get() {
console.log();
value;
},
() {
.();
value = val;
}
});


