一、在 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);// 执行异步操作或其他开销较大的操作}}
};