vue2响应式数据原理

1. 核心原理

Vue 2 的响应式系统基于 Object.defineProperty，通过 依赖收集 和 派发更新 来实现数据的响应式

• 依赖收集：在读取数据时，记录哪些函数（或组件）依赖了该数据。
• 派发更新：在修改数据时，通知所有依赖该数据的函数（或组件）进行更新。

简单示例

// 模块内的变量
let activeFunc = nullfunction observe(obj) {for (const key in obj) {// 临时属性let internalValue = obj[key];// 事件集合let fns = new Set()Object.defineProperty(obj, key, {get: function() {// 依赖收集if(activeFunc){fns.add(activeFunc)}return internalValue;}set: function (val) {internalValue = val;// 如果新值是对象，递归调用 observeif (typeof val === 'object' && val !== null) {observe(val);}//派发更新fns.forEach(fn => fn());}});}
}// 定义vue内部一个模块变量
// 在调用“使用到响应式变量的dom”更新函数的时候，先将该函数赋值给该变量
// 这样vue在依赖收集的时候，就可以通过收集该变量，进而统一收集
function fn1 () {}
function fn2 () {}activeFunc = fn1 // fn表示更新vue模版的函数
fn1()activeFunc = fn2
fn2()

2. 优化后的完整示例

1. 数组的响应式处理：
   • Object.defineProperty 无法直接监听数组的变化（如 push、pop 等操作）。
   • Vue 2 通过重写数组的原型方法来实现数组的响应式。
2. 依赖收集的封装：
   • 将依赖收集和派发更新的逻辑封装成一个独立的 Dep 类。
3. activeFunc 的管理：
   • 使用栈结构管理多个嵌套的依赖关系。

// 将依赖收集和派发更新的逻辑封装成一个独立的类
class Dep {constructor() {this.subscribers = new Set();}depend() {if (activeFunc) {this.subscribers.add(activeFunc);}}notify() {this.subscribers.forEach(fn => fn());}
}// 重写数组的原型方法
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);// Object.defineProperty 无法直接监听数组的变化（如 push、pop 等操作）
// Vue 2 通过重写数组的原型方法来实现数组的响应式
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {const original = arrayProto[method];arrayMethods[method] = function (...args) {const result = original.apply(this, args);dep.notify(); // 派发更新return result;};
});// 当前正在执行的函数
let activeFunc = null;
// 用于管理嵌套的依赖关系
const activeFuncStack = [];// 将当前函数推入栈
function pushActiveFunc(fn) {activeFuncStack.push(fn);activeFunc = fn;
}// 将当前函数弹出栈
function popActiveFunc() {activeFuncStack.pop();activeFunc = activeFuncStack[activeFuncStack.length - 1];
}// 监听对象，将其属性转换为响应式
function observe(obj) {if (Array.isArray(obj)) {// 如果是数组，重写其原型方法obj.__proto__ = arrayMethods;// 递归监听数组元素obj.forEach(item => observe(item));} else if (typeof obj === 'object' && obj !== null) {for (const key in obj) {let internalValue = obj[key];const dep = new Dep();// 递归监听嵌套对象observe(internalValue);Object.defineProperty(obj, key, {get: function () {dep.depend(); // 依赖收集return internalValue;},set: function (val) {internalValue = val;observe(val); // 递归监听新值dep.notify(); // 派发更新}});}}
}// 副作用函数，用于追踪依赖
function watchEffect(fn) {pushActiveFunc(fn);fn(); // 执行函数，触发依赖收集popActiveFunc();
}// 测试
const data = { count: 0, list: [1, 2, 3] };
observe(data);watchEffect(() => {console.log('Count:', data.count);
});watchEffect(() => {console.log('List:', data.list);
});data.count++; // 输出: Count: 1
data.list.push(4); // 输出: List: [1, 2, 3, 4]

3. 关键点解析

1. 依赖收集：
   • 在 get 方法中，通过 dep.depend() 收集当前正在执行的函数（activeFunc）。
   • activeFunc 是通过 watchEffect 设置的，表示当前正在执行的副作用函数。
2. 派发更新：
   • 在 set 方法中，通过 dep.notify() 通知所有依赖该属性的函数进行更新。
3. 数组的响应式处理：
   • 通过重写数组的原型方法，拦截数组的修改操作，并手动触发更新。
4. 嵌套对象和数组的处理：
   • 使用递归监听嵌套对象和数组，确保所有层级的属性都是响应式的。

4. 总结

Vue 2 的响应式系统通过 Object.defineProperty 实现数据的监听，虽然功能强大，但也存在一些局限性（如无法直接监听数组的变化）。通过重写数组方法和封装依赖收集逻辑，Vue 2 实现了完整的响应式系统。