详解Vue3中侦听器watch的使用教程

什么是watch

在使用Vue的开发中，watch是非常常用的一个功能。它作为Vue的一个重要特性，经过多年的发展，已经变成了非常强大的工具。它可以帮助我们监听数据的变化，进而执行相应的操作。对于开发中需要根据数据的变化做出相应的响应的情形，watch是非常有用的。

如何使用watch

基本用法

Vue中的watch是通过watch属性来实现的。我们可以使用Vue提供的$watch方法来对数据进行监控，当数据发生变化时，$watch方法会自动调用函数。下面是一个最基本的用法示例：

// 监控msg数据变化，并执行函数
watch: {
  msg: function (newVal, oldVal) {
    console.log('msg变化了', newVal, oldVal)
  }
}

在代码中，我们使用了watch属性来设置数据监听，当msg数据变化时，会自动执行函数，输出变化的信息。

深度监听

在Vue中，默认情况下，watch只能监听一级属性的变化，无法监听对象或数组中元素的变化。如果需要深度监听数据，可以使用deep属性启用深度监听。下面是一个使用deep属性的示例：

// 监控obj对象中name属性的变化，并执行函数
watch: {
  'obj.name': {
    deep: true,
    handler: function (newVal, oldVal) {
      console.log('name变化了', newVal, oldVal)
    }
  }
}

在代码中，我们通过监听obj对象的name属性来演示了如何使用深度监听。被监控的属性可以使用字符串形式表示，使用'obj.name'代表监听obj对象中的name属性。在handler函数中，我们可以获取到新值和旧值。

立即执行监听函数

有时候我们需要在数据变化后立即执行监听函数。在Vue中，我们可以通过immediate属性来实现。下面是一个使用immediate属性的示例：

// 监控msg数据变化，并输出信息
watch: {
  msg: {
    handler: function (newVal, oldVal) {
      console.log('msg变化了', newVal, oldVal)
    },
    immediate: true
  }
}

在代码中，我们通过设置immediate为true来实现立即执行监听函数的功能。当数据被watch监听时，就会立即执行监听函数。