watch监听函数方法

watch监听函数是Vue.js框架中的一个重要特性，于监测数据的变化并执行相应的操作。在Vue组件中，可以通过在watch选项中定义监听函数来实现对数据的监听。

watch监听函数有两种定义方式：一种是直接在组件的watch选项中定义，另一种是使用计算属性的方式。

1. 直接在组件的watch选项中定义监听函数：
在组件的watch选项中，可以定义一个或多个监听函数，每个监听函数都会对指定的数据进行监听，并在数据发生变化时执行相应的操作。监听函数接收两个参数：新值和旧值。

示例代码如下：

   export default {
     data() {
       return {
         message: 'Hello, Vue!',
       };
     },
     watch: {
       message(newValue, oldValue) {
         console.log('新值：', newValue);
         console.log('旧值：', oldValue);
         // 执行其他操作...
       },
     },
   }

2. 使用计算属性的方式定义监听函数：
可以使用计算属性来监听数据的变化，并在计算属性中执行相应的操作。计算属性会自动追踪依赖的数据，并在依赖数据发生变化时重新计算。

示例代码如下：

   export default {
     data() {
       return {
         message: 'Hello, Vue!',
       };
     },
     computed: {
       messageWatcher() {
         // 执行操作...
       },
     },
   }