Vue 监听器

在 Vue 中，我们可以使用监听器（watcher）来监测数据的变化并做出相应的响应。监听器是实现数据双向绑定的核心机制之一，它可以帮助我们避免手动检测和更新数据。

监听器的基本用法

Vue 提供了 $watch 方法来创建一个监听器，它接收两个参数：要监听的数据属性和回调函数。当被监听的数据发生变化时，该回调函数就会被触发执行。

例如，我们有以下的 Vue 实例：

javascript复制代码
let vm = new Vue({
  data: {
    message: 'Hello, world!'
  }
})

要监听 message 的变化，我们可以使用 $watch 方法：

javascript复制代码
vm.$watch('message', function (newVal, oldVal) {
  console.log(`message changed from ${oldVal} to ${newVal}`)
})

上面的代码中，我们定义了一个监听器，当 message 发生变化时，控制台就会输出一条消息。

需要注意的是，监听器的回调函数默认只在目标属性变化后才会被执行。如果需要在目标属性变化前也执行一次回调函数，可以传入第三个参数 { immediate: true }。

javascript复制代码
vm.$watch('message', function (newVal, oldVal) {
  console.log(`message changed from ${oldVal} to ${newVal}`)
}, { immediate: true })

监听器的高级用法

除了基本的监听器用法之外，Vue 还提供了一些高级的监听器用法。下面介绍两种常用的高级监听器用法：深度监听和计算属性。

深度监听

默认情况下，Vue 的监听器只会监测对象或数组的第一层属性变化。如果想要深度监听对象或数组内部的属性变化，需要使用 deep 选项。

例如，我们有以下的 Vue 实例：

javascript复制代码
let vm = new Vue({
  data: {
    user: {
      name: 'Alice',
      age: 20,
      address: {
        city: 'Shanghai'
      }
    }
  }
})

如果要深度监听 user 对象下的所有属性变化，可以这样写：

javascript复制代码
vm.$watch('user', function (newVal, oldVal) {
  console.log(`user changed`)
}, { deep: true })

上面的代码中，我们定义了一个深度监听器，当 user 对象内部的属性变化时，控制台就会输出一条消息。

需要注意的是，深度监听器的性能开销比普通监听器大，因为它需要遍历整个对象或数组来检查变化。

计算属性

计算属性（computed）是一种特殊的属性，其值根据其他数据属性计算得出。计算属性能够缓存其值，只有在它依赖的属性发生变化时才会重新计算。

例如，我们有以下的 Vue 实例：

javascript复制代码
let vm = new Vue({
  data: {
    firstName: 'Alice',
    lastName: 'Smith'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

在上面的代码中，我们定义了一个计算属性 fullName，它根据 firstName 和 lastName 计算出全名。当 firstName 或 lastName 发生变化时，fullName 就会重新计算。

计算属性除了能够缓存其值外，还可以接收参数和设置 setter 函数等高级用法。具体内容可以参考 Vue 官方文档。