Vue 中运用 watch 监听响应式数据变化的方法

在 Vue 开发中，响应式数据是其核心特性之一。而 watch 作为 Vue 的一个重要选项，能够方便地监听响应式数据的变化，并在数据发生变化时执行相应的操作。

我们来了解一下 watch 的基本语法。在 Vue 组件中，通过定义 watch 选项来配置监听器。例如：

export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('message 发生了变化，新值为：', newValue);
      console.log('旧值为：', oldValue);
    }
  }
}

上述代码中，我们在 watch 选项里定义了一个名为 message 的监听器。当 data 中的 message 数据发生变化时，就会触发这个监听器函数，函数接收两个参数，newValue 表示变化后的新值，oldValue 表示变化前的旧值。

除了监听简单的数据属性，watch 还能监听对象的属性变化。不过，当监听对象的某个属性时，需要注意使用深度监听。比如：

export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 25
      }
    }
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log('user 发生了变化，新值为：', newValue);
        console.log('旧值为：', oldValue);
      },
      deep: true
    }
  }
}

这里通过设置 deep 为 true 来开启深度监听，这样即使 user 对象内部的属性发生变化，也能被监听到。

另外，watch 还支持异步操作。在数据变化后执行一些异步任务时非常实用。例如：

export default {
  data() {
    return {
      searchText: ''
    }
  },
  watch: {
    searchText: {
      async handler(newValue) {
        // 模拟一个异步请求
        const response = await fetch(`https://api.example.com/search?q=${newValue}`);
        const result = await response.json();
        console.log('搜索结果：', result);
      },
      debounce: 300
    }
  }
}

这里使用了 debounce（防抖）功能，设置为 300 毫秒，表示在 searchText 变化后，延迟 300 毫秒才执行监听器函数，这样可以避免频繁触发请求。

Vue 中的 watch 为我们提供了强大而灵活的方式来监听响应式数据的变化，无论是简单属性、对象属性还是执行异步操作，都能轻松应对，极大地提高了开发效率。