在Vue.js中，计算属性和侦听器都是用于处理数据变化的方法。它们都可以响应式地更新视图，但它们的使用方式和区别略有不同。本文将介绍计算属性和侦听器的使用方法以及它们之间的区别。
一、计算属性的使用
计算属性是基于它们的依赖关系进行缓存的。只有在它的相关依赖发生改变时才会重新求值。这就意味着只要依赖不改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。
例如：
<template>
<div>
<p>总数：{{ total }}</p>
<p>平均值：{{ average }}</p>
</div>
</template>
export default {
data() {
return {
numbers: [1, 2, 3, 4, 5]
};
},
computed: {
total() {
return this.numbers.reduce((prev, curr) => prev + curr, 0);
},
average() {
return this.total / this.numbers.length;
}
}
};
在上面的例子中，我们定义了两个计算属性：total和average。当numbers数组发生变化时，只有与numbers相关的依赖发生变化时才会重新求值。因此，如果numbers数组没有发生变化，那么多次访问total和average属性会立即返回之前的计算结果，而不必再次执行函数。
二、侦听器的使用
侦听器则是在被侦听的对象发生变化时触发回调函数。每当被侦听对象发生变化时，侦听器都会执行回调函数以响应更改。与计算属性不同的是，侦听器不支持缓存。每次触发回调函数时，都会重新执行函数。
例如：
<template>
<div>
<p>总数：{{ total }}</p>
<p>平均值：{{ average }}</p>
</div>
</template>
export default {
data() {
return {
numbers: [1, 2, 3, 4, 5]
};
},
watch: {
numbers(newVal, oldVal) {
this.total = newVal.reduce((prev, curr) => prev + curr, 0);
this.average = this.total / newVal.length;
}
},
computed: {
total() {
return this.numbers.reduce((prev, curr) => prev + curr, 0);
},
average() {
return this.total / this.numbers.length;
}
}
};
在上面的例子中，我们使用watch选项来监听numbers数组的变化。每当numbers数组发生变化时，watch选项中的回调函数就会被执行。在回调函数中，我们重新计算了total和average的值，并将它们赋值给对应的计算属性。由于每次触发回调函数时都会重新执行函数，因此每次访问total和average属性都会重新计算它们的值。
注意：本文归作者所有，未经作者允许，不得转载
