一、基础详细教程（Vue2 + Vue3 区分版）
1. 核心概念
computed 计算属性
- 本质：依赖驱动、带缓存的派生属性
- 特点：
- 依靠响应式依赖自动计算，有缓存，依赖不变，多次读取只执行一次
- 同步执行，不支持异步
- 声明式编程，专注「由A算出B」
- 可配置 get/set，实现可读可改
watch 侦听器
- 本质：监听数据变化，执行副作用
- 特点：
- 无缓存，数据每次修改都会触发回调
- 命令式编程，专注「数据变了之后要做什么」
- 支持异步、复杂逻辑、接口请求、定时器、DOM操作
- 配置项：
immediate：初始化立刻执行deep：深度监听对象/数组
2. Vue2 写法（选项式 API）
// Vue2 computed
computed:{
fullName(){
return this.name + '先生'
}
}
// Vue2 watch
watch:{
name:{
handler(newVal){},
immediate:true,
deep:true
}
}
3. Vue3 区别（组合式API）
- 选项式API：和Vue2完全一致，无区别
- 组合式 setup 中：
computed()函数创建计算属性，用法逻辑不变watch / watchEffect替代选项式watch，功能更强- 核心底层区别不变：缓存、异步、使用场景完全一致
4. 核心五大区别（全版本通用）
- 缓存
computed 有缓存；watch 无缓存 - 异步
computed 禁止异步；watch 支持异步 - 场景
computed：数据格式化、拼接、筛选、简单计算
watch：异步请求、复杂逻辑、数据变更后续操作 - 执行时机
computed 惰性触发（读取才执行）
watch 默认数据改动才触发，可手动开启立即执行 - 编程模式
computed 声明式；watch 命令式
二、面试回答版本（Vue2/Vue3 通用，面试官通用）
computed 和 watch 都是Vue监听响应式数据的方式，核心区别有五点：
- 缓存机制：computed 基于依赖缓存，依赖不变时多次访问只会计算一次，性能更好；watch 没有缓存，数据每次变化都会触发回调。
- 异步支持：computed 只能同步执行，不支持异步；watch 可以处理异步请求、定时器等异步复杂逻辑。
- 使用场景：computed 适合简单数据派生、格式化、多数据合并计算；watch 适合监听数据变化后的副作用操作，比如接口请求、深层对象监听、复杂业务处理。
- 编程思想：computed 是声明式，侧重数据推导；watch 是命令式，侧重数据变化后的行为。
- 配置能力：watch 可通过 immediate 初始化执行、deep 深度监听引用类型；computed 主要用于取值，可通过set实现双向修改。
