一、Vue 响应式系统进阶：我们来玩点“高阶魔法”

什么是 Vue 响应式系统？

Vue.js 是一款 MVVM 框架，最大的卖点之一就是它的响应式系统。Vue 的响应式数据绑定就像是一根鱼竿，动一下数据，页面立马跟着变，仿佛背后有一位魔法师在操控。可实际上，这个所谓的“魔法”并不那么玄乎，背后真正的大脑就是响应式系统。

为了让这个系统不显得那么神秘，我们今天就来拆解一下它的工作原理。理解这些原理不仅能帮你写出更优雅的代码，还能避免踩一些常见的“坑”，比如：“我明明改了值但页面就是不刷新！”

Vue 的黑科技：Object.defineProperty 才是幕后大佬

Vue 是怎么做到数据变化后视图跟着更新的呢？答案就是 JavaScript 中的 Object.defineProperty。这货的工作原理就像是给对象加了一个监听器，任何对数据的读写操作都会被捕捉。

我们先来看一下它的基本语法：

Object.defineProperty(obj, prop, descriptor);

这就像签了一份魔法契约，obj 是你施法的对象，prop 是你要监控的属性，descriptor 则定义了这份契约的规则。里面有两个关键属性：get 和 set。

• get：当你访问这个属性时触发，想象一下，Vue 在这里偷听你获取数据的每一步，搞不好还悄悄记下了“依赖”。
• set：当你修改这个属性时触发，这时 Vue 立刻抓住机会，去更新页面，“眼观六路，耳听八方”的技能就是这么练成的。

接下来，我们用 Object.defineProperty 实现一个简单的响应式系统。

实现一个基本的响应式数据绑定

先给大家展示一下最简单的实现。通过 Object.defineProperty，我们能让一个对象的属性变得“响应式”，只要数据一变，Vue 就立刻能知道。

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            console.log(`你访问了 ${key}`);
            return val;
        },
        set(newVal) {
            if (newVal === val) return;
            console.log(`你修改了 ${key}，新的值为 ${newVal}`);
            val = newVal;
        }
    });
}

// 定义响应式对象
let data = { name: "Neo" };
defineReactive(data, 'name', data.name);

// 测试修改属性值
data.name = "Morpheus";  // 输出：你修改了 name，新的值为 Morpheus
console.log(data.name);  // 输出：你访问了 name

代码很简单：当你访问 name 属性时，它会输出“你访问了 name”，当你修改它时，输出“你修改了 name”。是不是有点小激动？Vue 的魔法就是这么实现的。

深度监听：对象嵌套也跑不掉

不过，现实世界里的对象可能更复杂，比如我们有个用户对象，它里面嵌套了更多的信息：

let user = {
    name: "Alice",
    details: {
        age: 25,
        city: "Wonderland"
    }
};

如果我们直接用上面的方法，只能监听到 user.name，无法监听到 user.details.city。所以，为了让嵌套对象也变得“响应式”，我们需要递归地监听所有嵌套属性。

function observer(obj) {
    if (!obj || typeof obj !== 'object') return;
    Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]));
}

通过递归调用 observer，我们就能监听嵌套的对象了。试试看：

let user = {
    name: "Bob",
    details: {
        age: 30,
        city: "Matrix"
    }
};
observer(user);

// 修改嵌套属性
user.details.city = "Zion"; // 输出：你修改了 city，新的值为 Zion

现在，嵌套的 city 变化时也会触发响应式更新！就像你在朋友圈发了条动态，所有的朋友都会立刻收到更新。

数组的坑：Array 也要有“魔法”

对象的响应式我们搞定了，但数组的情况却有点不一样。数组的元素不像对象属性可以直接通过 Object.defineProperty 来监控。Vue 内部通过劫持数组的常用方法（如 push、pop）来实现监听。

自定义响应式数组

我们可以自己实现一个简单版的响应式数组，劫持 Array 的常用方法：

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
    const original = arrayProto[method];
    Object.defineProperty(arrayMethods, method, {
        value: function(...args) {
            const result = original.apply(this, args);
            console.log(`数组发生了 ${method} 操作`);
            return result;
        }
    });
});

let arr = [1, 2, 3];
Object.setPrototypeOf(arr, arrayMethods);

// 测试一下
arr.push(4);  // 输出：数组发生了 push 操作
arr.pop();    // 输出：数组发生了 pop 操作

通过这种方式，每当你对数组进行修改，Vue 就能捕捉到变化。这种劫持方法就像在“监控”每一个数组操作，确保页面时刻更新。

依赖收集：Vue 的“智能化处理”

Vue 响应式系统最厉害的部分并不是简单的“监听和触发”，而是它的依赖收集。它会记住哪些地方用到了某个数据属性，当这个数据变化时，它会“精准打击”，只更新需要更新的部分，而不是无脑刷新整个页面。

实现一个简单的依赖收集

我们可以用 Dep 类来实现依赖收集的机制。它会收集依赖（也就是观察者），当数据变化时，它会通知这些观察者进行更新。

class Dep {
    constructor() {
        this.subs = [];
    }

    addSub(sub) {
        this.subs.push(sub);
    }

    notify() {
        this.subs.forEach(sub => sub.update());
    }
}

class Watcher {
    constructor(cb) {
        this.cb = cb;
    }

    update() {
        this.cb();
    }
}

Dep 负责管理依赖，当数据发生变化时，它会调用所有依赖的 update 方法，通知它们更新视图。

我们把 Dep 整合到响应式系统里，来做依赖收集：

function defineReactive(obj, key, val) {
    const dep = new Dep();

    Object.defineProperty(obj, key, {
        get() {
            console.log(`你访问了 ${key}`);
            if (Dep.target) {
                dep.addSub(Dep.target);  // 收集依赖
            }
            return val;
        },
        set(newVal) {
            if (newVal === val) return;
            console.log(`你修改了 ${key}，新的值为 ${newVal}`);
            val = newVal;
            dep.notify();  // 通知所有依赖更新
        }
    });
}

// 模拟依赖
Dep.target = new Watcher(() => {
    console.log("视图更新了！");
});

let data = { name: "Neo" };
observer(data);
data.name = "Morpheus";  // 输出：你修改了 name，新的值为 Morpheus
                         // 输出：视图更新了！

当我们访问或修改数据时，Dep 会根据当前的数据状态去收集依赖，数据变化时就会精准通知相关的依赖去更新，这就是 Vue 响应式系统的“智能化”。

总结：Vue 响应式系统不止是“黑魔法”

通过递归监听对象、劫持数组方法、依赖收集等机制，Vue 实现了强大的响应式系统。这个系统不仅能精确监控数据变化，还能智能优化更新性能，避免不必要的浪费。理解了这些原理后，你不仅能更好地使用 Vue，还能成为团队中的“黑科技达人”。

顺便提醒一下，别觉得这就完了，Vue 的响应式系统只是开胃菜，后面还有“虚拟 DOM”、“diff 算法”这些更厉害的技术等着你挑战呢！