Vue中的computed和watch两者在功能和作用机制上存在明显的差异。
首先，从性质上来说，computed实际上是一种计算属性，它的工作方式与data对象中的数据属性类似。而watch则更像是一个监听机制+事件机制，它可以监听某个数据的变化，并在数据变化时执行特定的函数。
其次，在作用机制上，两者都基于Vue的依赖追踪机制，都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化。然而，computed和watch在处理数据关系场景上有所不同。watch擅长处理一个数据影响多个数据的情况，而computed则更擅长处理一个数据受多个数据影响的情况。
此外，computed属性是根据依赖关系进行缓存的计算，并且只在需要的时候进行更新。而watch属性是一个对象，键是需要观察的表达式，值是对应回调函数，回调函数得到的参数为新值和旧值。
总的来说，Vue中的computed和watch两者在性质、作用机制以及使用场景上存在明显的差异。computed更适用于处理计算属性，而watch更适合用于监听数据变化并执行特定操作。
以下是Vue中computed和watch的例子：
computed例子：
vue
<template>
<div>
<p>{ { fullName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
};
</script>
在这个例子中，我们定义了一个computed属性fullName，它根据firstName和lastName计算得出。在模板中，我们直接使用{ { fullName }}来展示计算结果。当firstName或lastName发生变化时，fullName会自动更新并重新计算结果。
watch例子：
vue
<template>
<div>
<p>{ { fullName }}</p>
<button @click="changeName">Change Name</button>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
watch: {
firstName(newVal, oldVal) {
console.log('First name changed from ' + oldVal + ' to ' + newVal);
},
lastName(newVal, oldVal) {
console.log('Last name changed from ' + oldVal + ' to ' + newVal);
}
},
methods: {
changeName() {
this.firstName = 'Jane';
this.lastName = 'Doe';
}
}
};
</script>
在这个例子中，我们使用watch来监听firstName和lastName的变化。当点击"Change Name"按钮时，会触发changeName方法，将firstName和lastName的值进行更改。由于watch监听了这两个数据的变化，因此在控制台中会输出相应的日志信息。
