vue2响应式数据原理

1. 核心原理

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

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

简单示例

// 模块内的变量
let activeFunc = null

function 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;
             	// 如果新值是对象，递归调用 observe
                if (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 实现了完整的响应式系统。