6.2 监听属性

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

6.2.1 监听属性的基础

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

基本示例：

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选项。

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

即时监听（Immediate Watchers）：

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

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方法，允许你在实例创建后动态地添加监听器。这对于在组件的生命周期中根据条件添加监听器特别有用。

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

6.2.6 监听属性的最佳实践

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

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