6.2 监听属性-Vue.js从入门到精通(二)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(二)

### 6.2 监听属性

在Vue.js的开发旅程中，监听属性（Watchers）是一个强大而灵活的特性，它允许我们观察和响应Vue实例上数据的变化。与计算属性（Computed Properties）不同，监听属性不返回任何值，而是执行一些操作，如发送请求、执行函数或更新数据等。这种机制在处理异步操作、性能优化以及复杂逻辑处理时尤为有用。本章节将深入探讨Vue.js中的监听属性，包括其基本用法、高级技巧以及最佳实践。

#### 6.2.1 监听属性的基础

监听属性是通过Vue实例的`watch`选项来定义的，它接受一个对象，对象的键是需要观察的Vue实例上的数据属性名，值是一个回调函数，当对应的数据属性发生变化时，这个回调函数会被调用。

**基本示例**：

```javascript
new Vue({
  el: '#app',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 监听question属性的变化
    question(newVal, oldVal) {
      if (newVal) {
        this.answer = 'Thinking...';
        // 假设这里有一个异步操作来获取答案
        setTimeout(() => {
          this.answer = 'Answered ' + newVal;
        }, 1000);
      }
    }
  }
});
```

在上面的例子中，每当`question`属性的值发生变化时，`watch`中的`question`函数就会被触发。这个函数接收两个参数：新值`newVal`和旧值`oldVal`，允许我们根据这两个值来执行相应的逻辑。

#### 6.2.2 深度监听与即时监听

**深度监听**：

默认情况下，`watch`只监听数据属性的“浅层”变化，即如果数据是一个对象或数组，只有当其引用发生变化时（即指向了一个新的对象或数组），监听函数才会被触发。如果对象内部的属性发生了变化，而对象本身的引用没有变，则不会触发监听。为了监听对象内部属性的变化，我们需要使用`deep: true`选项。

```javascript
watch: {
  someObject: {
    handler(newVal, oldVal) {
      // 处理对象内部属性变化
    },
    deep: true // 深度监听
  }
}
```

**即时监听（Immediate Watchers）**：

有时候，我们希望在Vue实例创建时立即执行监听函数，而不是等到数据第一次变化时才执行。这可以通过设置`immediate: true`来实现。

```javascript
watch: {
  someData: {
    handler(newVal, oldVal) {
      // 立即执行或数据变化时执行
    },
    immediate: true // 立即执行
  }
}
```

#### 6.2.3 监听数组和对象的变化

对于数组和对象，由于Vue的响应式系统是基于ES5的`Object.defineProperty`（或ES6的`Proxy`，在Vue 3中）实现的，直接修改数组索引或对象属性可能不会触发视图更新。因此，在监听这些类型的数据时，需要特别注意。

- **数组**： 使用Vue提供的方法（如`push`、`pop`、`splice`等）来修改数组，可以确保响应性。
- **对象**： 使用`Vue.set`（Vue 2.x）或`this.$set`（Vue实例方法）来添加新属性，以确保新属性也是响应式的。

#### 6.2.4 监听计算属性

虽然计算属性是基于它们的依赖进行缓存的，但你不能直接监听计算属性的变化。不过，你可以通过监听计算属性所依赖的数据属性来间接实现。如果确实需要监听计算属性的“变化”，可能需要重新考虑你的设计，因为计算属性通常用于根据其他数据属性派生新值，而不是作为被监听的对象。

#### 6.2.5 监听属性的高级用法

**监听多个数据源**：

Vue的`watch`选项允许你监听多个数据属性，但每个属性都需要单独定义。如果你需要监听多个数据属性并基于它们的组合变化来执行操作，你可能需要在`watch`中定义多个监听器，或者使用计算属性来组合这些数据，然后监听这个计算属性。

**使用`this.$watch`进行动态监听**：

Vue实例还提供了一个`$watch`方法，允许你在实例创建后动态地添加监听器。这对于在组件的生命周期中根据条件添加监听器特别有用。

```javascript
created() {
  this.$watch('someData', (newVal, oldVal) => {
    // 处理数据变化
  });
}
```

#### 6.2.6 监听属性的最佳实践

1. **避免过度监听**：监听属性虽然强大，但过度使用可能会导致性能问题。只监听那些确实需要响应其变化的数据。
2. **考虑使用计算属性**：在可能的情况下，优先考虑使用计算属性而不是监听属性。计算属性基于它们的依赖进行缓存，这意呀着只要依赖没有变化，多次访问计算属性会立即返回之前的计算结果，而不需要重新执行函数体。
3. **注意清理**：如果你在使用`$watch`方法动态添加监听器，并且这些监听器在组件销毁后不再需要，请确保在组件销毁前清理它们，以避免内存泄漏。
4. **利用深度监听和即时监听选项**：根据实际需求合理使用`deep`和`immediate`选项，但请注意，深度监听可能会增加性能开销。

通过本章节的学习，你应该对Vue.js中的监听属性有了更深入的理解，包括其基本用法、高级技巧以及最佳实践。监听属性是Vue.js中一个非常有用的特性，它能够帮助你构建更加动态和响应式的Web应用。

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

Vue面试指南

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

Vue源码完全解析

VUE组件基础与实战

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

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

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

Vue原理与源码解析

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

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

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

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