Vue.js 中的 computed 和 watch 的区别是什么？

computed 和 watch 都是 Vue.js 中用于监听数据变化的方法,但两者有以下区别:

computed:

1. 它的结果会被缓存,除非它的依赖数据发生变化才会重新计算。
2. 它更适合用于计算的数据结果。
3. 它只有 getter,没有 setter。

使用方式:

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

示例:

html
<p>Full Name: {{ fullName }}</p>

js 
data: {
  firstName: 'John',
  lastName: 'Doe'  
}, 
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }  
}  

watch:

1. 它更适合监听单个数据的变化。
2. 它有 getter 和 setter,可以在数据变化后执行异步操作或开销较大的计算任务。

使用方式:

js
watch: {
  firstName(newValue, oldValue) {
    // 这个回调将在 `firstName` 改变后调用
  }  
} 

或者

js
watch: {
  'user.name': function(newName, oldName) {
    // 这个回调将在 `user.name` 改变后调用
  }  
}  

示例:

js
watch: {
  firstName(newValue, oldValue) {
    this.fullName = newValue + ' ' + this.lastName
  }  
}  

所以:
computed 更适合用于计算属性,它的缓存性能更高。
watch 更适合监听单个数据的变化,可以执行异步或开销较大的操作。
理解 computed 和 watch 的区别,可以让我们在 Vue.js 中选择更为恰当的数据监听方式,实现更优雅的逻辑处理。