Vue

选项式 API 按选项分类组织代码（data、methods、computed 分块），新手友好、结构约定清晰，但同一功能的逻辑被选项切散，组件变大后可读性下降，逻辑复用靠 mixins 有命名冲突与来源不清的问题。组合式 API 用 setup 与一系列函数（ref、computed、watch、onMounted）按功能组织代码，相关逻辑聚在一起，可提取为可复用的组合式函数（如 useMouse、useFetch），TypeScript 类型推导也更好，是 Vue3 主推风格。选型上：新项目尤其用 TS 与大型项目优先组合式；存量 Vue2 项目与简单页面维持选项式迁移成本更低；两者可以混用（script setup 与选项共存）。答题要点是逻辑关注点聚合、组合式函数取代 mixins、类型支持三点，能举一个自定义组合式函数例子更佳。

ref 包装任意值返回带 value 属性的响应式引用，内部对对象类型用 reactive 代理，基本类型靠类实例的存取器实现依赖追踪，模板中自动解包无需写 value。reactive 直接返回对象的 Proxy 代理，只支持对象与集合类型，基本类型不可用。关键差异是解构与替换：reactive 对象被解构或整体赋新值都会丢失响应式（解构后是普通值），需配 toRefs 保持；ref 不受影响，因此容器化场景更省心。深层行为：两者默认深层数据，ref 包对象内部也是深层代理，可用 shallowRef 与 shallowReactive 关闭。实践建议：统一用 ref 更简单一致，reactive 适合表单这类整体对象且避免解构。能讲清解构陷阱与 toRefs 即完整。

Vue2 用 Object.defineProperty 把 data 属性转为 getter 与 setter，getter 里收集依赖（Watcher 订阅当前正在求值的组件），setter 里派发更新触发重渲染。缺陷：无法侦测新增删除属性（要 set 与 del API）、数组下标与 length 变更无感（重写七个数组方法补丁）、初始化时递归定义全部属性开销大。Vue3 改用 Proxy 代理整个对象，拦截 get、set、deleteProperty、has 等十三种操作，属性增删与数组索引天然可侦测，且代理惰性创建，访问到才深层转换，初始化成本更低；track 在 get 时记录 activeEffect，trigger 在 set 时调度 effect，组件更新批量异步执行。effect 调度器与微任务队列实现去重合并。能对比两代实现并说出依赖收集与派发更新两阶段即优秀。

computed 是派生状态：依赖变化才惰性重算、有缓存、必须有返回值且是同步纯计算，模板中多次读取只算一次，适合格式化、过滤、聚合，切勿在 computed 里发请求或改状态。watch 显式声明侦听源并配回调，可拿到新旧值、支持 deep、immediate、flush 时机与停止侦听，适合异步或开销大的副作用，如搜索词变化防抖后请求、路由参数变化重新加载。watchEffect 立即执行一次并自动追踪回调内用到的响应式依赖，依赖变化自动重跑，适合依赖关系简单、无需旧值的场景；回调里注册的清理函数在下次重跑前调用，可取消过期请求。判据口诀：算值用 computed，回应变化做事用 watch，依赖自动追踪的轻副作用用 watchEffect。

v-if 真条件渲染：条件为假时节点不创建，切换时走完整挂载销毁，切换开销大、初始开销小，适合条件很少变化的分支（权限区块、对话框内容）。v-show 通过切换 display 样式控制显隐，节点始终渲染，初始开销大但切换极廉，适合频繁切换的场景（标签页、折叠面板）。与 v-for 同元素时 v-if 优先级更高（Vue3 中 v-if 无法访问 v-for 变量），应改用计算属性先过滤。key 是虚拟 DOM diff 的身份标识：同层节点复用靠 key 匹配，列表顺序变化时用稳定唯一业务 id 让 Vue 移动而非重建，避免用索引导致状态错位与输入框内容串行；key 也可强制替换元素重置状态（如加随机 key）。能讲清 patch 复用策略与索引 key 的复现例子即满分。