在 Vue 中，计算属性、方法和监听器是处理数据逻辑的常用工具。虽然它们都能达到相似的效果，但在实际开发中，它们之间有着不同的用途和特点。本文将首先对比计算属性和方法的区别，然后是计算属性和监听器的区别，最后探讨它们搭配运用的场景和方法。
1. 计算属性 vs 方法
计算属性 🧮
计算属性是 Vue 提供的一种便捷的方式来进行数据处理和响应式更新。它类似于一个缓存的属性，只有在相关依赖发生改变时才会重新计算。计算属性适合用于在模板中多次使用的逻辑复杂的数据处理。
方法 ⚙️
方法是在 Vue 实例中定义的普通函数，可以通过在模板中调用方法来进行数据处理。每次调用方法时都会重新执行函数体内的逻辑。方法适合处理一些单次或者少量的数据计算逻辑。
下面是一个示例，演示了计算属性和方法的使用：
<template>
<div>
<p>计算属性：{{ computedValue }}</p>
<p>方法：{{ getComputedValue() }}</p>
</div>
</template>
<script>
export default {
data() {
return {
dataValue: 10
};
},
computed: {
computedValue() {
return this.dataValue * 2;
}
},
methods: {
getComputedValue() {
return this.dataValue * 2;
}
}
};
</script>
在上面的代码中，computedValue 是一个计算属性，它会根据 dataValue 的值自动计算出一个新的值；而 getComputedValue 是一个方法，每次调用它时都会重新计算出一个新的值。
2. 计算属性 vs 监听器
计算属性 🧮
计算属性适用于依赖其他属性的场景，它会根据其相关的依赖动态计算出一个新的值，并且会在依赖发生变化时自动更新。
监听器 🔊
监听器适用于当你需要在数据变化时执行异步或开销较大的操作时。它可以观察和响应 Vue 实例上的数据变化，执行一些自定义的逻辑。
下面是一个示例，演示了计算属性和监听器的使用：
<template>
<div>
<p>计算属性：{{ computedValue }}</p>
<p>监听器：{{ watchValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
dataValue: 10,
watchValue: 0
};
},
computed: {
computedValue() {
return this.dataValue * 2;
}
},
watch: {
dataValue(newValue, oldValue) {
this.watchValue = newValue * 2;
}
}
};
</script>
在上面的代码中，computedValue 是一个计算属性，它会根据 dataValue 的值自动计算出一个新的值；而 watchValue 是一个监听器，当 dataValue 的值发生变化时，监听器会执行自定义的逻辑，更新 watchValue 的值。
3. 计算属性和监听器的搭配运用
在 Vue 中，计算属性和监听器可以相互配合，用于处理更复杂的数据逻辑。在这种搭配运用中，计算属性用于根据其他属性计算衍生属性的值，而监听器则用于在数据变化时执行一些异步或开销较大的操作，从而保持数据的一致性。以下是一个简单的场景描述，说明了计算属性和监听器的搭配运用：
假设我们有一个需求：用户在输入框中输入一个数字，然后立即显示该数字的平方，并在一秒后将该数字发送到服务器进行保存。在这种情况下，我们可以使用计算属性来计算数字的平方，并使用监听器来监听输入框的值变化，然后在值变化时触发保存到服务器的操作。
<template>
<div>
<input v-model="inputValue" @input="handleInput">
<p>输入的数字是: {{ inputValue }}</p>
<p>输入的数字的平方是: {{ squaredValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
squaredValue: 0
};
},
computed: {
// 计算属性用于计算输入数字的平方
squaredValue() {
return this.inputValue ** 2;
}
},
methods: {
// 监听器用于监听输入框值的变化，执行保存到服务器的操作
handleInput() {
// 模拟异步操作，延迟1秒后发送到服务器
setTimeout(() => {
console.log('将输入值发送到服务器：', this.inputValue);
}, 1000);
}
}
};
</script>
在上面的示例中，inputValue 是一个双向绑定的输入框值，squaredValue 是一个计算属性，表示 inputValue 的平方。同时，我们使用 @input 监听器来监听输入框的值变化，当输入框的值变化时，会立即计算出新的平方值，并且延迟1秒后将输入值发送到服务器进行保存。
这种搭配运用方式使得我们可以更灵活地处理复杂的数据逻辑，保证了数据的一致性，并且提升了用户体验。
4. 结语
在 Vue 中，计算属性、方法和监听器是处理数据逻辑的常用工具，它们各自有着不同的特点和用途。了解它们之间的区别，并合理地搭配运用，可以帮助我们更加高效地开发 Vue 应用。
原文链接：https://juejin.cn/post/7344026980616011814 作者：慕仲卿
