前端面试：Vue2/Vue3 区别与生命周期

1. Vue2 和 Vue3 响应式区别？

Vue2 使用 Object.defineProperty 劫持对象属性，对新增/删除属性、数组部分操作需要额外处理；Vue3 使用 Proxy 代理整个对象，对对象、数组、Map、Set 等支持更完整。

2. Vue2 和 Vue3 API 风格区别？

Vue2 主要使用 Options API，把逻辑分散在 data、methods、computed；Vue3 支持 Composition API，可以把同一业务逻辑聚合到 setup 或 hooks 中，更适合大型项目和逻辑复用。

3. Vue2 和 Vue3 生命周期钩子对应关系？

beforeCreate/created 在 Vue3 中通常用 setup 替代；beforeMount 对应 onBeforeMount；mounted 对应 onMounted；beforeUpdate 对应 onBeforeUpdate；updated 对应 onUpdated；beforeDestroy/destroyed 对应 onBeforeUnmount/onUnmounted。

4. Vue3 常用生命周期有哪些？

常用有 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted、onActivated、onDeactivated、onErrorCaptured。

5. setup 在什么时候执行？

setup 在组件创建阶段执行，早于 beforeMount，此时还没有 DOM，不能直接操作模板 DOM。通常在 setup 里声明响应式数据、计算属性、方法和生命周期钩子。

6. 哪个生命周期适合请求接口？

如果请求不依赖 DOM，可以在 setup 中直接发起或在 onMounted 发起；如果依赖 DOM 尺寸、图表初始化等，应放在 onMounted。服务端渲染场景需要另行考虑数据预取。

7. 哪个生命周期适合操作 DOM？

操作真实 DOM 通常放在 onMounted 之后，因为此时组件已经挂载。数据更新后需要读取最新 DOM 时，可以配合 nextTick。

8. nextTick 的作用？

Vue 更新 DOM 是异步批量执行的。修改响应式数据后，如果马上读取 DOM 可能还不是最新，需要用 nextTick 等 DOM 更新完成后再操作。

9. keep-alive 相关生命周期？

被 keep-alive 缓存的组件不会频繁销毁和重建，进入时触发 onActivated，离开时触发 onDeactivated。适合列表页返回保留状态等场景。

10. Vue3 相比 Vue2 还有哪些重要变化？

Vue3 支持多个根节点 Fragment、Teleport、Suspense，更好的 TypeScript 支持，更好的 Tree Shaking，虚拟 DOM 和编译优化也更强。状态管理上 Vue3 项目更常配合 Pinia。