vue深入理解computed与watch的区别及使用场景
Vue是一个简洁、高效、灵活的前端框架，它有许多优秀的特性，其中最重要的两个是computed和watch。这两个特性都可以用于处理Vue应用程序中经常出现的数据，但它们的用法却完全不同。在本文中，我们将深入探讨computed和watch的区别及适用场景，并为读者带来一些实用的经验和技巧。
computed是Vue的一个计算属性，用于在数据变化时自动更新数据，并且可以进行缓存。computed可以理解为一些需要被动态处理的数据，这些数据依赖于其他数据的状态，例如下面的例子：
<template>
<div>
<p>商品价格：{{ price }}</p>
<p>折扣价格：{{ salePrice }}</p>
</div>
</template>
<script>
export default {
data() {
return {
originalPrice: 100,
discount: 0.8
};
},
computed: {
price() {
return this.originalPrice;
},
salePrice() {
return this.originalPrice * this.discount;
}
}
}
</script>在这个例子中，我们定义了一个原始价格和一个折扣价格，然后使用computed属性分别计算出了商品价格和折扣价格。computed属性内部的代码是自动运行的，每当数据变化时，它们都会重新计算，并且能够缓存结果，避免了重复计算的效率问题。
相比之下，watch是Vue的一个观察器特性，它用于在数据变化时响应函数。watch能够监听一个变量的变化，并在变量发生变化时执行一些特定的操作，例如下面的例子：
立即学习“前端免费学习笔记（深入）”；
<template>
<div>
<input v-model="inputValue" />
<p>{{ displayValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: "",
displayValue: ""
};
},
watch: {
inputValue(newValue) {
this.displayValue = newValue.toUpperCase();
}
}
}
</script>在这个例子中，我们定义了一个input框和一个p标签，它们分别显示了用户输入和用户输入的大写字母。在watch属性下定义了一个inputValue变量的响应函数，当inputValue变量发生变化时，我们变更displayValue变量的值。需要注意的是，watch的响应函数不会返回任何东西，而是修改Vue实例的数据。
总结来说，computed与watch的区别在于它们是被动计算还是响应式处理。当需要根据任意数据的变化进行一些特殊的处理或者格式化时，应该使用computed。当需要动态地响应数据，并且有一些特定的操作需要执行时，应该使用watch。最后，需要注意的是，它们之间相互独立，一个computed属性不会被watch观察到，反之亦然。
（本文中的代码片段来自Vue官方文档。）
