vue computed和watch的区别

// Vue computed 和 watch 的区别

// 1. computed 计算属性
new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      // 计算属性会根据其依赖的数据自动更新
      return this.firstName + ' ' + this.lastName;
    }
  }
});

// 解释：computed 属性是基于它的依赖进行缓存的，只有在它的依赖发生变化时才会重新求值。
// 这使得 computed 属性非常适合用于处理一些复杂的逻辑，因为它可以避免不必要的重复计算。

// 2. watch 监听属性
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message(newVal, oldVal) {
      // 当 message 发生变化时，watch 会触发，并且可以访问到新旧值
      console.log('message changed from', oldVal, 'to', newVal);
    }
  }
});

// 解释：watch 用于监听某个数据的变化，并在变化时执行相应的操作。它不会像 computed 那样缓存结果，
// 而是每次数据变化时都会触发回调函数。watch 更适合用于需要执行异步操作或开销较大的操作。