生命周期与内置组件

20. Vue 2 与 Vue 3 生命周期如何对应？

展开答案与追问

参考答案： Vue 2 的 beforeCreate/created、beforeMount/mounted、beforeUpdate/updated 与销毁阶段构成常见主线。Vue 3 Options API 保留创建、挂载和更新钩子，beforeDestroy/destroyed 改名 beforeUnmount/unmounted。Composition API 的 setup 承担初始化入口，用 onMounted 等注册钩子。

追问与易错点： setup 在 Options API 的 beforeCreate 之前执行，没有 onCreated 这种对应钩子；组合式生命周期应在有效组件初始化上下文中注册。

21. mounted 是否意味着所有内容都准备好了？

展开答案与追问

参考答案： onMounted 表示本组件 DOM 已创建并插入父容器，且同步子组件已挂载；不包含异步子组件或 Suspense 内的异步树。它不保证图片完成加载，也不保证容器已连接到整个文档。

追问与易错点： 访问 DOM 还需考虑条件渲染；mounted 不在服务端渲染执行。生命周期 API

22. 父子组件生命周期顺序怎么回答？

展开答案与追问

参考答案： 在普通同步父子场景，初始化通常父先开始，挂载完成通常子先于父；父子同一轮都更新时，父 beforeUpdate 先于子，子 updated 先于父。卸载时父 beforeUnmount 先触发，子 unmounted 先于父 unmounted。

追问与易错点： 前提很重要：异步组件、Suspense、条件分支和仅子自身更新会改变观察序列，不能背一条覆盖所有情况的日志。

23. 资源清理应放在哪个生命周期？

展开答案与追问

参考答案： 外部事件、定时器、WebSocket 等需在 onUnmounted 或合适的清理阶段释放。同步在 setup 中创建的侦听器通常随组件卸载自动停止；异步回调中晚创建的侦听器可能需手动停止。

追问与易错点： updated 内无条件写入自身渲染依赖容易循环更新；不要把组件清理全部寄托于浏览器关闭页面。

24. KeepAlive 与普通显示隐藏有什么不同？

展开答案与追问

参考答案： KeepAlive 缓存动态组件实例，使切换时可保留局部状态；通过 include/exclude 和 max 管理缓存范围。停用与重新激活触发 deactivated/activated，停用不是销毁。

追问与易错点： 定时器与连接未必因为停用自动停止，应按业务在激活/停用时管理。KeepAlive

25. Teleport、异步组件与 Suspense 解决什么问题？

展开答案与追问

参考答案： Teleport 把宿主 DOM 放到指定目标，逻辑组件关系仍保留；defineAsyncComponent 包装按需加载组件，配置加载和错误等状态；Suspense 协调异步依赖与 fallback。它们分别关注 DOM 放置、加载和等待边界。

追问与易错点： Vue 文档将 Suspense 标为实验特性，不能与 React 同名组件的全部行为等同。Suspense

26. Vue Router 路由变化为什么没有重新 mounted？

展开答案与追问

参考答案： 同组件类型在参数变化时可能复用实例，因此要监听具体路由参数或使用相应的路由更新守卫。避免监听整个 route 做无关刷新；请求也要防止旧参数结果覆盖新页面。

追问与易错点： 强行给 router-view 随机 key 会重建并丢失状态，不应作为通用解决方案。动态路由