vue 用的watch 的说明及例子

在 Vue.js 中，watch 是一个用于观察和响应 Vue 实例上数据变化的对象。当需要在数据变化时执行异步或开销较大的操作时，watch 是非常有用的。

说明
watch 对象包含一系列键值对，其中键是需要观察的响应式数据属性，值是一个处理函数或者一个包含处理函数和选项的对象。
当观察的数据属性发生变化时，对应的处理函数会被调用，并且会接收到新值和旧值作为参数。
你可以在处理函数中执行任何需要在数据变化时进行的操作，比如发送异步请求、更新其他数据属性等。
例子
下面是一个简单的 Vue 组件示例，其中使用了 watch 来观察 searchQuery 数据属性的变化，并在变化时执行一个搜索函数：

<template>  
  <div>  
    <input v-model="searchQuery" type="text" placeholder="Search...">  
    <ul>  
      <li v-for="item in searchResults" :key="item.id">{
   {
    item.name }}</li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {
     
  data() {
     
    return {
     
      searchQuery: '',  
      searchResults: []  
    };  
  },  
  watch: {
     
    searchQuery(newVal, oldVal) {
     
      // 当 searchQuery 发生变化时，执行搜索函数  
      this.performSearch(newVal);  
    }  
  },  
  methods: {
     
    performSearch(query) {
     
      // 这里是一个模拟的搜索函数，实际应用中可能会发送异步请求到后端获取搜索结果  
      if (query) {
     
        this.searchResults = [  
          {
    id: 1, name: 'Result 1 for ' + query },  
          {
    id: 2, name: 'Result 2 for ' + query },  
          {
    id: 3, name: 'Result 3 for ' + query }  
        ];  
      } else {
     
        this.searchResults = [];  
      }  
    }  
  }  
};  
</script>

在这个例子中：

searchQuery 是一个响应式数据属性，通过 v-model 指令与输入框双向绑定。
当用户在输入框中输入文本时，searchQuery 的值会发生变化。
watch 对象中的 searchQuery 处理函数会在 searchQuery 值变化时被调用。
处理函数内部调用了 performSearch 方法来执行搜索操作，并根据搜索结果更新 searchResults 数据属性。
最后，搜索结果会显示在一个无序列表中。