Vue 响应式系统与 `computed` 属性详解：小白也能学会的完整指南

一、什么是 Vue 的响应式系统？

在 Vue 中，响应式系统 是它的核心特性之一。简单来说，它能让你的数据和视图始终保持同步：数据变化时，视图自动更新。这种机制让开发者无需手动操作 DOM，就能轻松实现动态页面。

1.1 响应式的核心思想

• 数据驱动：页面的变化由数据驱动，而不是手动操作 DOM。
• 自动追踪：Vue 能自动追踪哪些数据被使用了，当这些数据变化时，自动触发视图更新。
• 高效更新：通过虚拟 DOM 和 diff 算法，只更新变化的部分，而不是整个页面。

---

二、Vue 2 和 Vue 3 的响应式实现差异

2.1 Vue 2：Object.defineProperty

Vue 2 使用 Object.defineProperty 来实现响应式：

• 原理：遍历对象的每个属性，用 getter 和 setter 拦截访问和修改。
• 限制：
  • 无法检测数组索引变化（如 arr[1] = 2）。
  • 无法检测新增或删除的属性（需用 Vue.set 或 Vue.delete）。
  • 性能问题：需要递归遍历整个对象，对大型数据结构不友好。

// Vue 2 的响应式实现（简化版）
const obj = {
  name: "Alice"
};

Object.defineProperty(obj, "age", {
  get() {
    console.log("读取 age");
    return this._age;
  },
  set(value) {
    console.log("设置 age");
    this._age = value;
  }
});

2.2 Vue 3：Proxy

Vue 3 改用 Proxy 实现响应式：

• 原理：通过 Proxy 拦截整个对象的操作（如读取、赋值、删除等）。
• 优势：
  • 支持数组操作（如 push、delete）。
  • 支持新增/删除属性。
  • 性能更优：按需拦截，避免递归遍历。

// Vue 3 的响应式实现（简化版）
const reactive = (target) => {
  return new Proxy(target, {
    get(target, key, receiver) {
      console.log(`读取属性：${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`设置属性：${key} => ${value}`);
      return Reflect.set(target, key, value, receiver);
    }
  });
};

const state = reactive({ count: 0 });
state.count = 1; // 输出：设置属性：count => 1

---

三、响应式的核心流程：依赖收集与派发更新

3.1 依赖收集（Dependent Collection）

当模板或 computed 属性访问数据时，Vue 会记录当前的依赖关系：

• 流程：
  1. 访问数据属性 → 触发 getter。
  2. 将当前正在执行的组件（或 computed）注册为该属性的依赖。
  3. 存储到 Dep 对象中（Vue 2）或 effect 集合中（Vue 3）。

3.2 派发更新（Trigger Update）

当数据发生变化时，Vue 会通知所有依赖该数据的组件重新渲染：

• 流程：
  1. 修改数据属性 → 触发 setter。
  2. 从 Dep 或 effect 集合中取出所有依赖。
  3. 执行更新逻辑（如重新渲染组件）。

---

四、computed 计算属性：高效的数据派生

4.1 什么是 computed？

computed 是 Vue 提供的响应式计算属性，它基于其他响应式数据进行计算，并具有以下特点：

• 缓存机制：只有依赖的数据变化时才会重新计算。
• 自动更新：依赖变化时，computed 会自动重新计算并更新视图。
• 声明式编程：将复杂逻辑从模板中抽离，保持模板简洁。

4.2 computed 与 methods 的区别

特性	computed	methods
缓存	✅ 依赖未变时返回缓存结果	❌ 每次调用都重新执行
性能	更高（适合频繁访问的计算）	较低（适合一次性操作）
适用场景	依赖数据派生新值	无状态操作（如事件处理）

4.3 computed 的基本用法

示例：拼接全名

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "John",
      lastName: "Doe"
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

示例：带 getter 和 setter 的 computed

computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(newValue) {
      const names = newValue.split(" ");
      this.firstName = names[0];
      this.lastName = names[1] || "";
    }
  }
}

---

五、computed 的底层原理（Vue 3 简化版）

5.1 核心机制

• Effect（副作用函数）：computed 本质上是一个 effect，它会在依赖变化时重新执行。
• 缓存控制：通过 dirty 标志控制是否需要重新计算。
• 调度器（Scheduler）：延迟执行更新，避免频繁渲染。

// Vue 3 中 computed 的简化实现
function computed(getter) {
  let value;
  let dirty = true;

  const effectFn = effect(getter, {
    lazy: true,
    scheduler() {
      dirty = true;
    }
  });

  return {
    get value() {
      if (dirty) {
        value = effectFn();
        dirty = false;
      }
      return value;
    }
  };
}

---

六、computed 的使用场景与最佳实践

6.1 适合使用 computed 的场景

• 复杂逻辑：如过滤列表、格式化时间。
• 频繁访问：如页面标题、统计信息。
• 依赖多个数据源：如购物车总价。

6.2 不适合使用 computed 的场景

• 异步操作：如请求接口数据（应使用 watch 或 async/await）。
• 一次性计算：如点击按钮触发的逻辑（应使用 methods）。

---

七、常见面试题解析

面试题1：computed 和 methods 有什么区别？

答案：

• computed 有缓存，适合频繁访问的计算；methods 每次调用都重新执行。
• computed 依赖响应式数据自动更新；methods 需要手动触发。

面试题2：computed 的缓存机制如何工作？

答案：

• 只有依赖的数据变化时才会重新计算，否则返回缓存结果。
• Vue 3 通过 dirty 标志和调度器控制缓存。

面试题3：如何实现一个简单的 computed？

答案：

function computed(getter) {
  let value;
  let dirty = true;

  const effectFn = effect(getter, {
    lazy: true,
    scheduler() {
      dirty = true;
    }
  });

  return {
    get value() {
      if (dirty) {
        value = effectFn();
        dirty = false;
      }
      return value;
    }
  };
}

---

八、总结

• 响应式系统 是 Vue 的核心，Vue 3 使用 Proxy 实现更高效的响应式。
• computed 是基于响应式数据的派生属性，具有缓存和自动更新的特性。
• 选择 computed 还是 methods 取决于场景：复杂逻辑用 computed，一次性操作用 methods。