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>

总结区别

• 计算属性适用于复杂的逻辑计算，特别是当你需要根据数据的变化得到一个新的值时。
• 侦听器适用于当数据变化需要执行异步操作或较为复杂的业务逻辑时。
• 计算属性是基于依赖的缓存，并且是自动追踪依赖，而侦听器需要手动设置并且不进行缓存。

在选择使用计算属性还是侦听器时，最好根据你的特定场景和需求来决定。通常，计算属性是首选，因为它们更简洁，往往更易于维护。