10.1.2 Vue中的响应性对象 -TypeScript和Vue从入门到精通(三)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(三)

### 10.1.2 Vue中的响应性对象

在Vue.js框架中，响应性系统是其核心特性之一，它允许Vue应用能够响应数据的变化并自动更新DOM。这种响应性是通过Vue的响应性对象实现的，它们是Vue组件状态管理的基石。本章节将深入探讨Vue中的响应性对象，包括其工作原理、声明方式、使用场景以及最佳实践。

#### 10.1.2.1 理解响应性原理

Vue的响应性系统基于ES6的Proxy（在某些旧版本Vue中使用Object.defineProperty）来实现。当Vue实例被创建时，它会遍历data选项中的属性，并使用Proxy（或Object.defineProperty）将这些属性转换为getter/setter。这样一来，每当这些属性的值被访问或修改时，Vue就能感知到这些变化，并执行相应的依赖更新逻辑。

- **Proxy vs Object.defineProperty**：Proxy提供了更全面的拦截能力，包括属性值的读取、设置、枚举、函数调用等，而Object.defineProperty只能拦截属性的get和set操作。Vue 3全面采用Proxy来重构其响应性系统，以提供更强大的功能和更好的性能。

#### 10.1.2.2 声明响应性对象

在Vue组件中，你可以通过`data`函数返回一个对象来声明响应性状态。这个对象中的每个属性都会自动变为响应性的。

```javascript
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

在上面的例子中，`message`属性是响应性的。当`changeMessage`方法被调用时，`message`的值会改变，并且由于Vue的响应性系统，与之相关的DOM也会自动更新以反映新的值。

#### 10.1.2.3 使用`computed`属性

除了直接在`data`中声明响应性数据外，Vue还提供了`computed`属性，它允许你基于组件的响应性状态计算并返回一个值。这个计算值是基于它们的响应性依赖进行缓存的，只有当相关依赖发生改变时，计算值才会重新求值。

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

在这个例子中，`fullName`是一个计算属性，它基于`firstName`和`lastName`的值计算得到。只要`firstName`或`lastName`中的任何一个发生变化，`fullName`就会自动更新。

#### 10.1.2.4 响应性对象的深度与浅层

Vue的响应性系统是深度响应的，这意味着它不仅对对象的顶层属性进行响应性处理，还递归地处理对象内部嵌套的属性。但是，对于数组和对象的一些特定操作（如通过索引直接设置数组项、添加新属性到对象），Vue可能无法自动追踪这些变化，因为JavaScript的限制或Vue内部优化的考虑。

对于这种情况，Vue提供了`Vue.set`（Vue 3中推荐使用`reactive`或`ref`的`.value`属性配合直接赋值）和`vm.$set`实例方法来确保这些变化能够被Vue的响应性系统捕获。

```javascript
// Vue 2.x 示例
this.$set(this.someObject, 'newProperty', 'newValue');

// Vue 3.x 使用 Composition API 示例
import { reactive } from 'vue';

const state = reactive({
  someObject: {
    existingProperty: 'existingValue'
  }
});

// 直接添加新属性
state.someObject.newProperty = 'newValue'; // Vue 3 能够追踪这种变化
```

#### 10.1.2.5 响应式引用（`ref`）与响应式对象（`reactive`）

在Vue 3的Composition API中，引入了`ref`和`reactive`来更细粒度地控制响应性。`ref`用于处理基本数据类型的响应性（虽然内部也是通过对象封装），而`reactive`用于处理对象的响应性。

- **`ref`**：用于基本数据类型（如字符串、数字等），但返回的是一个对象，其中包含一个`.value`属性来存储实际的值。这样做是为了确保即使是基本类型也能被Vue的响应性系统追踪。

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

const count = ref(0);
console.log(count.value); // 访问实际值
count.value++; // 修改值
```

- **`reactive`**：用于对象，直接返回一个响应性的对象，你可以像操作普通对象一样操作它，Vue会自动追踪其内部属性的变化。

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

const state = reactive({
  count: 0
});

state.count++; // Vue 会自动追踪这个变化
```

#### 10.1.2.6 响应性对象的最佳实践

1. **明确响应性需求**：在声明响应性对象之前，明确你的需求是处理基本类型还是对象/数组，以及是否需要深度响应性。

2. **使用Composition API的`ref`和`reactive`**：在Vue 3中，尽量使用Composition API来管理你的响应性状态，它提供了更灵活和强大的方式来组织和重用逻辑。

3. **避免在模板中直接修改响应性状态**：虽然技术上可行，但在模板中直接修改状态可能会导致代码难以理解和维护。推荐在methods或computed属性中处理逻辑。

4. **利用计算属性和侦听器**：合理使用计算属性来缓存基于响应性状态的派生值，使用侦听器来观察响应性状态的变化并执行副作用。

5. **注意Vue的响应性限制**：了解Vue无法自动追踪某些特定操作（如直接通过索引修改数组项）的局限性，并学会使用`Vue.set`（Vue 2.x）或`.value`属性直接赋值（Vue 3.x）来规避这些问题。

通过深入理解Vue中的响应性对象，你将能够更有效地管理Vue组件的状态，并创建出更加动态和响应式的用户界面。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(二)

TypeScript和Vue从入门到精通(一)

Vue源码完全解析

Vue.js从入门到精通(一)

Vue面试指南

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(五)

Vue.js从入门到精通(二)

Vue3技术解密

TypeScript和Vue从入门到精通(四)

Vue.js从入门到精通(三)

移动端开发指南