vue的计算属性和watch的区别

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

1. 计算属性 (Computed Properties):

• 用途：计算属性用于派生或计算基于已有数据的属性，通常用于模板中。它们是基于依赖的，只有在相关依赖数据变化时才会重新计算，然后缓存结果，以确保高效性能。
  
• 声明方式：计算属性以一个函数的形式定义在组件的computed选项中。
  

2. 示例：

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

1. 监听器 (Watchers):
2. 用途：监听器用于观察特定数据的变化，然后执行自定义的操作，通常是异步的或者复杂的操作，例如发起网络请求或执行一些特殊逻辑。
   
3. 声明方式：监听器以一个函数的形式定义在组件的watch选项中，监视特定数据的变化，并在数据变化时执行指定的操作。
   
4. 示例：

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

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