computed属性和 watch侦听器的区别

本文主要是介绍computed属性和 watch侦听器的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在 Vue.js 中，computed 属性和 watch 侦听器都用于响应数据的变化，但它们是为不同的场景和目的设计的。

Computed Properties (`computed`)

computed 属性是基于它们的依赖进行计算的响应式属性。当它们的依赖项发生变化时，计算属性会重新计算。它们最适合用于计算派生状态。计算属性默认只有 getter 函数，但你也可以提供一个 setter。

特点:

缓存：计算属性是基于它们的响应式依赖进行缓存的。只有在依赖发生变化时，计算属性才会重新计算。这意味着，如果依赖没有改变，多次访问计算属性将立即返回之前的计算结果，而不必再次执行计算。
同步：计算属性通常用于同步操作，它们的返回值立即可用。
自动追踪依赖：Vue 自动追踪计算属性的依赖，确保它们在依赖变化时更新。
用于模板：当你需要在模板中使用某个复杂逻辑时，计算属性是很方便的。

示例:

<template><div>{{ reversedMessage }}</div>
</template><script>
export default {data() {return {message: 'Hello'}},computed: {// 计算属性reversedMessage() {return this.message.split('').reverse().join('');}}
}
</script>

Watchers (`watch`)

watch 侦听器允许你观察和响应 Vue 实例上数据变动的情况。当你需要在数据变化时执行异步或开销较大的操作时，这是最有用的。

特点:

无缓存：侦听器在每次触发时会执行函数，不论数据是否真的发生了变化。
异步：通常用于数据的异步操作，例如，通过 AJAX 获取数据。
手动追踪依赖：你需要手动指定需要观察的数据。
用于观察数据变化：当你需要在某个数据变化时执行特定的逻辑，例如，获取数据、校验等。

示例:

<template><div>{{ fullName }}</div>
</template><script>
export default {data() {return {firstName: 'Foo',lastName: 'Bar'}},watch: {// 侦听器firstName(newVal, oldVal) {this.fullName = newVal + ' ' + this.lastName;},lastName(newVal, oldVal) {this.fullName = this.firstName + ' ' + newVal;}}
}
</script>