vue计算属性和监听属性的区别

在Vue中，计算属性（Computed Properties）和监听属性（Watchers）是用于响应数据变化的两种不同方式。

计算属性是基于已有的响应式数据来计算和生成新的数据，类似于一个方法，但是可以像属性一样访问。它们可以依赖于其他计算属性或响应式数据，并且会在其依赖项发生变化时自动重新计算。计算属性具有缓存机制，只有当它的依赖项发生变化时才会重新计算，否则会返回之前的计算结果。这可以帮助避免不必要的计算和提高性能。

下面是一个计算属性的示例：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

监听属性用于监听数据的变化，并在数据变化时执行相应的逻辑。它们是一个函数，接收两个参数：新值（newVal）和旧值（oldVal）。当监听的数据发生变化时，这个函数就会被调用。监听属性可以用于执行异步操作、触发其他操作或执行复杂的逻辑。

下面是一个监听属性的示例：

watch: {
  firstName(newVal, oldVal) {
    console.log('firstName changed from ' + oldVal + ' to ' + newVal);
  }
}

总结来说，计算属性适用于基于已有数据进行计算和派生新数据的场景，而监听属性适用于监听数据变化并执行相应操作的场景。计算属性具有缓存机制，而监听属性则更适合处理异步操作或需要执行特定逻辑的情况。