computed和watch的区别

面试被问到了computed和watch的区别，答得不好，遂整理一下相关知识点

定义

computed（计算属性） 计算属性是基于它的依赖进行缓存的"计算值"，当它依赖的数据发生变化时，才会重新计算，否则直接使用缓存的值。适合用来根据已有响应式数据"计算"一个新的值。
watch（侦听器） 用于声明在数据更改时调用的侦听回调。

使用场景

当模板中的某个值需要通过一个或多个数据计算得到时，就可以使用计算属性，还有计算属性的函数不接受参数；监听属性主要是监听某个值发生变化后，对新值去进行逻辑处理。

computed

依赖现有数据计算新值，具有缓存（若依赖的数据不变，computed不会重新计算）。可用于：筛选列表、多个字段组合显示

javascript 复制代码

computed: {
  filteredList() {
    return this.list.filter(item => item.includes(this.keyword));
  }，
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

watch

适合侦听数据变化后执行异步或副作用操作（除了本身计算和返回新值，还执行了其他操作）。如：请求接口、手动操作 DOM、本地存储。可深度监听（deep: true）或立即触发（immediate: true）

watch能够同时监听多个数据源的变化，执行相应的回调。

javascript 复制代码

import { ref, watch } from 'vue';

const count = ref(0);
const double = ref(0);

// 创建多个数据源的侦听器
watch([count, double], ([newCount, newDouble], [oldCount, oldDouble]) => {
  console.log(`count变化：新值 - ${newCount}, 旧值 - ${oldCount}`);
  console.log(`double变化：新值 - ${newDouble}, 旧值 - ${oldDouble}`);
});

面试问题：讲讲computed和watch的区别

三个方面回答：用途、特点和适用场景

computed基于已有数据派生出新数据，有缓存，只在依赖变化并被访问时才会重新计算。适合处理显示在模板上的计算结果、格式转换等

watch在数据变化时执行副作用逻辑，主动响应依赖变化并立即执行函数**，每次都重新执行，不管结果是否变化。适合处理异步请求、动画效果等