Vue 响应式基础

封面图 • 2026-03-27 • Vue

Vue 的**响应式基础**是 Vue 框架的核心特性之一，它使得数据的变化能够自动反映到视图中。Vue 2 和 Vue 3 在实现响应式的方式上有所不同，但核心思想是一致的：**当数据发生变化时，视图会自动更新**。

---

## 一、Vue 响应式的原理（Vue 2 vs Vue 3）

### 1. Vue 2 的响应式系统

Vue 2 使用的是 **Object.defineProperty()** 来实现数据的响应式。

#### 实现方式：
- 对 `data` 中的每个属性进行 **getter / setter** 操作。
- 当访问属性时，触发 `getter`，将该属性添加到依赖收集器中。
- 当修改属性时，触发 `setter`，通知依赖它的视图进行更新。

#### 示例代码：

```javascript
let obj = { name: 'Alice' };

Object.defineProperty(obj, 'name', {
  get() {
    console.log('get');
    return this._name;
  },
  set(newValue) {
    console.log('set');
    this._name = newValue;
    // 触发视图更新
  }
});
```

#### 缺点：
- 无法监听数组下标和对象新增属性。
- 需要对每个属性进行遍历处理，性能较低。

---

### 2. Vue 3 的响应式系统（基于 Proxy）

Vue 3 引入了 **ES6 的 Proxy API** 来实现更强大的响应式系统。

#### 实现方式：
- 使用 `Proxy` 包装原始对象，拦截读写操作。
- 通过 `Reflect` 实现对原始对象的操作。
- 支持数组和对象的新增属性。

#### 示例代码：

```javascript
const obj = { name: 'Bob' };
const proxy = new Proxy(obj, {
  get(target, key) {
    console.log(`get ${key}`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`set ${key} to ${value}`);
    target[key] = value;
    // 触发视图更新
    return true;
  }
});
```

#### 优点：
- 更加灵活，支持数组、对象新增属性。
- 性能更好，不需要递归遍历。

---

## 二、Vue 响应式的核心概念

### 1. 响应式数据（Reactive Data）

在 Vue 中，我们通过 `data()` 或 `reactive()` 定义响应式数据。

#### Vue 2 示例：

```javascript
export default {
  data() {
    return {
      message: 'Hello Vue'
    };
  }
};
```

#### Vue 3 示例（使用 Composition API）：

```javascript
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello Vue 3'
    });
    return { state };
  }
};
```

### 2. 依赖收集（Dependency Tracking）

Vue 会追踪哪些组件或计算属性依赖了某个数据，当数据变化时，这些依赖会自动更新。

### 3. 虚拟 DOM 和 Diff 算法

Vue 通过虚拟 DOM 和 Diff 算法来高效地更新真实 DOM，避免频繁操作 DOM。

---

## 三、响应式的基本用法

### 1. 数据绑定

```html
<template>
  <div>{{ message }}</div>
</template>

### 2. 计算属性（Computed）

计算属性会根据依赖的数据自动重新计算。

```javascript
computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}
```

### 3. Watcher（监听器）

用于监听数据变化并执行异步或开销较大的操作。

```javascript
watch: {
  message(newVal, oldVal) {
    console.log('message changed from', oldVal, 'to', newVal);
  }
}
```

---

## 四、Vue 响应式的注意事项

| 问题 | 解决方法 |
|------|----------|
| 无法监听数组下标或对象新增属性 | Vue 2 可以使用 `$set` 方法；Vue 3 使用 `reactive` 或 `ref` |
| 响应式数据嵌套过深 | 使用 `deep: true` 选项（Vue 2）或 `reactive`（Vue 3） |
| 响应式数据不能直接赋值 | 应该使用 `this.$set()` 或 `proxy[key] = value` |

---

## 五、总结

| 特性 | Vue 2 | Vue 3 |
|------|-------|--------|
| 响应式实现 | `Object.defineProperty` | `Proxy` |
| 数组/对象新增属性支持 | 不支持（需 `$set`） | 支持 |
| 性能 | 较低 | 更高 |
| API | `data`, `computed`, `watch` | `reactive`, `ref`, `computed`, `watch` |

---

如果你需要我进一步讲解 Vue 2 和 Vue 3 响应式的区别，或者演示一个完整的响应式示例，请告诉我！