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. 优化后的完整示例

数组的响应式处理：
- Object.defineProperty 无法直接监听数组的变化（如 push、pop 等操作）。
- Vue 2 通过重写数组的原型方法来实现数组的响应式。
依赖收集的封装：
- 将依赖收集和派发更新的逻辑封装成一个独立的 Dep 类。
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. 关键点解析

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