vue计算属性与侦听器的区别

在 Vue 中，计算属性（computed properties）和 侦听器（watchers）都可以用来监听数据的变化并做出响应，但它们的应用场景和功能有所不同。下面是两者的主要区别：

1. 计算属性（Computed）

计算属性是基于 Vue 实例中的数据的依赖进行计算并返回结果的属性，它具有 缓存 的特点，只有在相关依赖的数据发生变化时，计算属性才会重新计算。计算属性通常用于处理和显示动态变化的内容。

特点：

• 基于数据的依赖：计算属性是基于其他数据的值来计算的，只有相关的依赖数据发生变化时，计算属性才会重新计算。
• 缓存：如果计算属性依赖的数据没有变化，Vue 会返回之前的缓存值，而不会重新计算。
• 简洁：计算属性的使用非常直观，直接在模板中绑定即可，Vue 会自动管理计算的缓存。
• 返回值：计算属性必须返回一个值，它就像一个普通的属性。

例子：

new Vue({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

在这个例子中，fullName 是一个计算属性，它依赖 firstName 和 lastName，只有在这两个数据变化时，fullName 才会重新计算。

2. 侦听器（Watch）

侦听器是 Vue 提供的另一种响应式机制，用于