Vue中computed和watch是两种常用的属性，它们的作用和应用场景不同。在本文中，我们将详细介绍computed和watch的区别，并提供具体代码示例。
一、computed
computed是Vue的一个计算属性，它用于对数据进行处理和衍生出新的属性。computed属性是基于它的依赖进行缓存的，只有在相关依赖发生改变时，computed才会重新计算。
在Vue实例中，我们可以通过computed选项来定义计算属性。下面是一个示例：
new Vue({
data: {
num1: 2,
num2: 3
},
computed: {
sum: function() {
return this.num1 + this.num2;
}
}
})在上面的代码中，我们定义了两个数据num1和num2，通过sum计算属性计算它们的和。
computed属性使用的时候，可以直接在模板中使用，同时Vue会自动追踪其依赖，当依赖发生变化时，computed会重新计算。这使得我们可以在模板中直接使用computed属性，而不需要手动更新。
<div>num1: {{ num1 }}</div>
<div>num2: {{ num2 }}</div>
<div>sum: {{ sum }}</div>当num1或num2发生变化时，computed属性sum会自动重新计算。
computed属性适用于对数据进行复杂的计算或数据处理的场景。它提供了一种简洁而高效的方式来衍生新的属性。
二、watch
watch是Vue实例的一个属性，它用于监听数据的变化并执行相应的操作。watch属性通常用于需要在数据变化时执行异步操作、复杂的逻辑判断等场景。
同样，在Vue实例中，我们可以通过watch选项来定义监听属性。下面是一个示例：
new Vue({
data: {
num1: 2,
num2: 3,
sum: 0
},
watch: {
num1: function(newVal, oldVal) {
this.sum = newVal + this.num2;
},
num2: function(newVal, oldVal) {
this.sum = this.num1 + newVal;
}
}
})在上面的代码中，我们定义了两个数据num1和num2，通过watch选项监听它们的变化，并在变化时更新sum属性。
watch属性使用的时候，需要定义监听的属性，并指定一个回调函数。当监听的属性发生变化时，回调函数会被触发，并传入新值和旧值作为参数。
watch属性适用于对数据的变化需要执行一些具体操作的场景。它可以监听多个属性的变化，并在变化时执行相应的逻辑。
三、computed和watch的区别和应用场景
总结起来，computed属性适用于对数据进行复杂的计算或数据处理的场景，它可以简洁地衍生出新的属性，并且只在相关依赖发生改变时重新计算。
而watch属性更适用于需要在数据变化时执行异步操作、复杂的逻辑判断等场景，它可以监听多个属性的变化，并在变化时执行相应的逻辑。
最后，我们需要根据具体的业务需求来选择使用computed还是watch。在实际开发中，我们可以根据需求的复杂度和性能的考虑来选择合适的属性。
以上就是Vue中computed和watch的区别与应用场景的详细内容，更多请关注php中文网其它相关文章！
