vue的计算属性和watch的区别

Vue.js 中的计算属性（Computed Properties）和监听器（Watchers）都用于监视数据的变化并触发相应的操作，但它们有不同的用途和工作方式。

1. 计算属性 (Computed Properties):

   • 用途：计算属性用于派生或计算基于已有数据的属性，通常用于模板中。它们是基于依赖的，只有在相关依赖数据变化时才会重新计算，然后缓存结果，以确保高效性能。

   • 声明方式：计算属性以一个函数的形式定义在组件的computed选项中。

2. 示例：

   computed: {
     fullName() {
       return this.firstName + ' ' + this.lastName;
     }
   }
   

   监听器 (Watchers):

3. 用途：监听器用于观察特定数据的变化，然后执行自定义的操作，通常是异步的或者复杂的操作，例如发起网络请求或执行一些特殊逻辑。

4. 声明方式：监听器以一个函数的形式定义在组件的watch选项中，监视特定数据的变化，并在数据变化时执行指定的操作。

5. 示例：

   watch: {
     inputValue(newVal, oldVal) {
       // 在inputValue发生变化时执行操作
       this.debouncedSearch();
     }
   },
   methods: {
     debouncedSearch: _.debounce(function() {
       // 执行异步搜索操作
     }, 300)
   }
   

   总结：

6. 计算属性适用于基于已有数据的派生属性的情况，它们具有缓存，不会多次计算相同的值。
7. 监听器适用于需要执行自定义操作或副作用的情况，它们更适合处理异步操作或对数据的深度监视。
8. 在选择使用计算属性还是监听器时，要考虑具体的需求和性能要求。通常情况下，如果你只需要派生一个新的属性，计算属性更合适。如果需要监听数据变化并执行复杂操作，监听器更适合。