What is the difference between computed property and watcher in Vuejs?

在Vue.js中，计算属性（computed properties）和观察者（watchers）都是响应式的方式来处理数据变化，但它们的用途和工作方式有所不同。下面我将详细解释这两者的区别，并提供具体的应用场景来说明。

计算属性（Computed Properties）

计算属性是基于它们的依赖进行缓存的。只有当依赖项发生变化时，计算属性才会重新计算。这意味着只要依赖项保持不变，多次访问计算属性会立即返回之前的计算结果，不需要再次执行函数。

优点：

• 性能更好（依赖不变时不需重新计算）
• 代码更简洁、逻辑更集中

场景示例： 假设我们有一个购物车应用，我们需要计算购物车中所有商品的总价格。这个总价格会依赖于每个商品的数量和单价，所以可以用计算属性来实现：

javascript
computed: {
  totalPrice() {
    return this.products.reduce((total, product) => {
      return total + (product.quantity * product.price);
    }, 0);
  }
}

这里，totalPrice就是一个计算属性，它会自动更新当products数组中的商品的quantity或price发生变化时。

观察者（Watchers）

观察者用于响应数据的变化，并执行异步操作或较大的开销操作。观察者不会返回值，而是提供一个回调函数，在数据变化时执行。

优点：

• 适合于数据变化响应时执行异步或开销较大的操作
• 可以访问旧值和新值，更适合执行有条件的响应

场景示例： 如果我们想在用户更改语言偏好设置后立即调用一个API来加载新的语言数据，这时可以使用观察者：

javascript
watch: {
  language(newVal, oldVal) {
    this.fetchLanguageData(newVal);
  }
},

methods: {
  fetchLanguageData(lang) {
    // API调用来根据新的语言设置获取数据
  }
}

在这个例子中，每当language属性变化时，观察者都会被触发，然后执行fetchLanguageData方法来加载相关语言的数据。

总结

总的来说，计算属性适用于计算依赖数据的场景，使用它们可以保证代码的高效和简洁；而观察者适合于响应数据变化执行异步或复杂逻辑的场景。选择合适的响应方式可以让你的Vue应用更加高效和易于维护。