vue computed和watch区别

// Vue computed 和 watch 区别示例

// 引入 Vue
import Vue from 'vue';

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!',
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  // 计算属性
  computed: {
    // 当依赖的数据发生变化时，计算属性会自动更新
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  // 监听器
  watch: {
    // 监听 message 的变化，并在变化时执行回调函数
    message(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
    },
    // 深度监听对象或数组的变化
    someObject: {
      handler(newVal, oldVal) {
        console.log('someObject changed');
      },
      deep: true
    }
  }
});

// 解释说明：
// 1. computed 是计算属性，依赖于其他数据进行计算并返回结果。当依赖的数据发生变化时，计算属性会自动重新计算。
// 2. watch 是监听器，用于监听某个数据的变化并在变化时执行特定的逻辑。watch 可以处理更复杂的逻辑，并且可以访问新旧值。