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

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

### 6.2.1 监听属性简介

在Vue.js的世界里，数据驱动视图是其核心理念之一。Vue通过数据绑定机制，使得开发者可以轻松地实现数据变化时自动更新DOM的效果。然而，在某些复杂的应用场景中，仅仅依靠数据绑定可能不足以满足所有需求。此时，Vue提供的监听属性（Watchers）便显得尤为重要。监听属性允许我们对Vue实例上的数据变化进行响应，并在数据变化时执行特定的逻辑，这为开发者提供了更多的灵活性和控制力。

#### 6.2.1.1 什么是监听属性

监听属性是Vue实例的一个选项，用于观察和响应Vue实例上数据的变化。当被监听的数据发生变化时，Vue会自动调用指定的回调函数来执行相应的逻辑。这使得开发者能够在数据变化时执行复杂的逻辑，比如发送异步请求、过滤数据、修改其他数据等。

监听属性可以定义为Vue实例选项中的`watch`属性，它是一个对象，对象的键是要监听的数据的路径（可以是字符串形式的直接路径，也可以是函数来返回具体的值），值是一个函数或是一个包含多个选项的对象。当被监听的数据变化时，这个函数或对象中的回调函数将被调用。

#### 6.2.1.2 基本用法

##### 字符串键的监听

最简单的监听属性用法是使用字符串键来指定要监听的数据路径，然后提供一个回调函数。例如：

```javascript
new Vue({
  el: '#app',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 监听question的变化
    question(newValue, oldValue) {
      if (newValue) {
        this.answer = 'Thinking...';
        // 这里可以执行更复杂的逻辑，比如发送请求获取答案
        setTimeout(() => {
          this.answer = 'The answer is 42.';
        }, 1000);
      }
    }
  }
});
```

在这个例子中，每当`question`的值发生变化时，`watch`中的`question`函数就会被调用，并且接收到新的值和旧的值作为参数。这里我们模拟了一个异步获取答案的过程，先设置`answer`为`'Thinking...'`，一秒后给出答案`'The answer is 42.'`。

##### 函数键的监听

除了使用字符串键直接指定数据路径外，Vue还允许使用函数作为键，该函数返回需要被监听的具体值。这种方式在处理复杂表达式或计算属性时特别有用。

```javascript
new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe',
    fullName: ''
  },
  computed: {
    // 计算属性
    fullNameComputed() {
      return `${this.firstName} ${this.lastName}`;
    }
  },
  watch: {
    // 使用函数键监听计算属性的变化
    fullNameComputed(newValue) {
      console.log(`Full name changed to: ${newValue}`);
    },
    // 也可以监听动态表达式的返回值
    someDynamicValue: function () {
      // 这里返回一个根据当前数据动态计算得到的值
      return this.firstName.toUpperCase() + this.lastName.toLowerCase();
    },
    handler(newValue, oldValue) {
      console.log(`Dynamic value changed from ${oldValue} to ${newValue}`);
    }
  }
});
```

注意，使用函数键时，监听器不会自动接收旧值作为参数，除非你显式地返回一个对象，其中包含`handler`函数以及可选的`deep`、`immediate`等选项。

#### 6.2.1.3 高级选项

Vue的监听属性还支持一些高级选项，以满足更复杂的需求。

- **`deep`**: 当需要监听一个对象或数组内部值的变化时，设置`deep: true`。这样，对象或数组内部的任何值发生变化时，监听器都会被触发。

- **`immediate`**: 在组件创建时立即以当前的初始值调用一次监听器的回调函数。这对于在数据初始化时就需要执行某些逻辑的场景非常有用。

- **`handler`**: 当`watch`的键是函数时，这个函数返回的对象中可以包含一个`handler`属性，其值是一个函数，该函数会在数据变化时被调用。

示例：

```javascript
new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John',
      age: 30
    }
  },
  watch: {
    // 深度监听user对象内部的变化
    user: {
      handler(newValue, oldValue) {
        console.log(`User changed: ${newValue.name} - ${newValue.age}`);
      },
      deep: true,
      immediate: true
    }
  }
});
```

在这个例子中，`user`对象内部的任何属性发生变化时，监听器的回调函数都会被调用，并且由于设置了`immediate: true`，在组件创建时也会立即执行一次回调函数。

#### 6.2.1.4 监听属性与计算属性的区别

虽然监听属性和计算属性在功能上有一定的重叠，但它们的使用场景和目的有所不同。

- **计算属性**（Computed Properties）主要用于声明式地描述一些依赖响应式数据的值。当依赖的数据变化时，计算属性会自动重新计算并返回新的值。计算属性是基于它们的响应式依赖进行缓存的，只有当依赖发生变化时才会重新计算。

- **监听属性**（Watchers）则更多地用于观察和响应Vue实例上数据的变化，并执行一些复杂的逻辑。监听属性不会缓存结果，每当监听的数据变化时，都会执行回调函数。

在选择使用计算属性还是监听属性时，应根据具体需求来决定。如果需要进行一些数据的转换或组合，并且这些数据会频繁地依赖其他数据变化，那么使用计算属性会更合适。如果需要在数据变化时执行一些复杂的逻辑，比如发送请求、过滤数据等，那么监听属性会是更好的选择。

#### 6.2.1.5 小结

监听属性是Vue.js中一个非常强大的特性，它允许开发者对数据的变化进行细粒度的控制和响应。通过合理使用监听属性，我们可以实现更加复杂和灵活的数据处理逻辑，从而提升应用的性能和用户体验。然而，也需要注意避免滥用监听属性，因为过多的监听可能会导致性能问题。在设计应用时，应仔细考虑是否真的需要监听某个数据的变化，以及是否有更合适的方式来实现相同的功能。

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

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

Vue原理与源码解析

移动端开发指南

VUE组件基础与实战

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

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

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

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

vuejs组件实例与底层原理精讲

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

Vue3技术解密

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