一、引言
Vue.js是一款强大的前端框架，它提供了多种机制来处理数据和DOM之间的关系。其中，计算属性（computed）和侦听器（watch）是Vue中用于处理数据变化并响应DOM更新的两个重要特性。本文将详细介绍Vue的计算属性和侦听器的使用方法和场景。
二、计算属性（computed）
计算属性是基于它们的依赖进行缓存的。只有在相关依赖发生改变时它们才会重新求值。这意味着只要message还没有发生改变，多次访问computedProp计算属性会立即返回之前缓存的结果，而不必再次执行函数。
计算属性在处理复杂逻辑和大量计算时非常有用。它们允许我们声明性地描述一个值依赖于其他值的情况。当依赖的值发生变化时，计算属性会自动更新。
例如，假设我们有一个对象，它包含一个价格和一个数量的属性，我们想要计算总价。我们可以使用计算属性来实现这个功能：
new Vue({
el: '#app',
data: {
price: 10,
quantity: 2
},
computed: {
totalPrice: function() {
return this.price * this.quantity;
}
}
});
在模板中，我们可以直接使用totalPrice计算属性：
<div id="app">
<p>Price: {
{ price }}</p>
<p>Quantity: {
{ quantity }}</p>
<p>Total Price: {
{ totalPrice }}</p>
</div>
当price或quantity的值改变时，totalPrice会自动更新，并且只会在依赖的属性实际改变时才会重新计算。
三、侦听器（watch）
与计算属性不同，侦听器允许我们观察和响应Vue实例上的数据变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
侦听器是一个对象，其键是要观察的表达式，值是对应回调函数。当表达式的值变化时，回调函数会被调用。
以下是一个使用侦听器的例子：
new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe',
fullName: ''
},
watch: {
firstName: function(newVal, oldVal) {
this.fullName = newVal + ' ' + this.lastName;
},
lastName: function(newVal, oldVal) {
this.fullName = this.firstName + ' ' + newVal;
}
}
});
在这个例子中，我们侦听firstName和lastName属性的变化，并在它们变化时更新fullName属性。注意，侦听器的回调函数接收两个参数：新值和旧值。
四、computed与watch的区别
- 计算属性是基于它们的依赖进行缓存的，而侦听器在每次数据变化时都会触发。
- 计算属性更适合处理同步的、复杂的逻辑计算，而侦听器更适合处理异步操作或执行开销较大的任务。
- 计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时它们才会重新求值。而侦听器不论值是否改变都会执行回调，因此应当避免在回调中进行高开销的操作。
五、总结
计算属性和侦听器是Vue中处理数据变化和响应DOM更新的重要工具。计算属性适用于基于依赖进行缓存的复杂逻辑计算，而侦听器则适用于处理数据变化时的异步或开销较大的操作。根据具体的应用场景和需求，我们可以灵活选择使用计算属性或侦听器来实现我们的功能。希望本文能帮助大家更好地理解和使用Vue的计算属性和侦听器。
