Vue.js 中的 watch 和 computed 都是用于监听数据变化并执行相应操作的选项，但它们的使用场景和优劣势有所不同。
两者区别
watch 用于监听一个或多个数据属性的变化，并在变化时执行相应的处理函数。 它可以是一个对象或一个函数。当 watch 是一个对象时，它的键是要监听的数据属性名，值是对应的处理函数。当 watch 是一个函数时，它接收两个参数：新值和旧值，返回一个布尔值表示是否继续监听该数据属性。
computed 用于根据依赖的数据属性计算出一个新的数据属性，并将其缓存起来。 当依赖的数据属性发生变化时，computed 会自动重新计算新的数据属性的值。computed 通常用于复杂的计算逻辑，可以提高性能和代码的可读性。
代码示例
演示了如何使用 watch 和 computed 选项：
<template>
<div>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<p>{
{
fullName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: '',
lastName: ''
};
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
watch: {
firstName(newValue, oldValue) {
console.log('First name changed from ' + oldValue + ' to ' + newValue);
},
lastName(newValue, oldValue) {
console.log('Last name changed from ' + oldValue + ' to ' + newValue);
}
}
};
</script>
在这个示例中，我们使用 v-model 指令将输入框的值绑定到 firstName 和 lastName 数据属性上。然后，我们使用 computed 选项计算出 fullName 数据属性的值，并在模板中显示出来。同时，我们使用 watch 选项监听 firstName 和 lastName 数据属性的变化，并在其变化时输出日志信息。
需要注意的是，当使用 computed 选项时，如果依赖的数据属性没有发生变化，则不会重新计算新的数据属性的值，从而提高性能。而当使用 watch 选项时，无论依赖的数据属性是否发生变化，都会执行相应的处理函数。因此，在需要频繁更新的场景下，使用 watch 选项可能会导致性能问题。
总之，watch 和 computed 都是用于监听数据变化并执行相应操作的选项，但它们的使用场景和优劣势有所不同。在实际开发中，应根据具体需求选择合适的选项。
