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

在 Vue.js 中,watch 和 computed 都是用于监听数据变化并响应的选项。区别在于:

computed:

1. 用于对已有数据进行处理后返回,并 Saved as computed data。
2. 依赖的响应式数据发生改变时,computed 会自动重新计算。
3. 计算结果会被缓存,除非依赖的响应式数据发生变化才会重新计算。
4. 可以通过 this.computedData 来使用计算结果。

watch:

1. 用于观测数据的变化,并执行回调方法。
2. 需要手动指定要观测的数据。
3. 回调方法会在每次数据变化时调用,没有缓存。
4. 通常用于执行异步操作或数据变化较复杂时。

示例:

computed:

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

模板:

html
<p>{{ fullName }}</p>

watch:

js
watch: {
  firstName: function (newVal, oldVal) {
    this.fullName = newVal + ' ' + this.lastName
  }  
}

模板:

html 
<p>{{ fullName }}</p> 

可以看出,computed 自动响应依赖数据的变化,并返回计算结果以供使用,更加简洁。
watch 需要手动指定监听的数据,并在回调方法中执行更新逻辑,更加灵活。