computer与watch坚挺的区别与使用

一、在 Vue 中，watch 和 computed 是两种不同的机制，用于处理数据变化和计算属性watch详解vue监听watch与computed、this.$set设置响应式数据。

1、watch
用途: 监听数据的变化，并在数据变化时执行相应的回调函数。
适用场景: 当你需要在数据变化时执行异步操作或开销较大的操作时。

示例：

 watch: {
    myData: {
      handler(newVal, oldVal) {
        console.log('myData changed from', oldVal, 'to', newVal);
        // 执行异步操作或其他开销较大的操作
      },
      deep: true, // 深度监听
      immediate: true // 立即执行
    }
  }

2、computed
用途: 计算属性，基于依赖的数据动态计算值。
适用场景: 当你需要根据其他数据计算得出一个值，并且这个值需要在模板中多次使用时。
示例:

 computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }

两者区别
1、缓存: computed 属性会缓存结果，只有在依赖的数据变化时才会重新计算。而 watch 不会缓存结果，每次数据变化都会执行回调函数。
2、同步 vs 异步: computed 适合同步计算，而 watch 适合异步操作或开销较大的操作。
3、使用方式: computed 通常用于模板中，而 watch 通常用于方法中。

二、结合使用
你可以在同一个组件中同时使用 watch 和 computed，以充分利用它们各自的优势。例如：

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  },
  watch: {
    fullName(newVal, oldVal) {
      console.log('fullName changed from', oldVal, 'to', newVal);
      // 执行异步操作或其他开销较大的操作
    }
  }
};