面试题答案
一键面试1. 性能优化与生命周期钩子关系
created钩子：在此钩子中，可进行数据预取操作。例如，如果组件依赖一些后端数据，在created中发起 API 请求获取数据，避免在mounted时才获取，减少首次渲染时间。因为在 SSR 场景下，mounted钩子在客户端执行，而created钩子在服务端和客户端都会执行。在性能优化方面，提前获取数据能使组件在渲染时直接使用，减少用户等待时间。beforeMount钩子：适用于对 DOM 操作做一些准备工作。虽然在 SSR 中主要是服务端生成 HTML 结构，但对于一些需要在挂载前处理的样式类名添加、元素属性初始化等轻量操作，可在此钩子完成。比如根据数据动态决定某个元素的class，可以提前计算好，避免在mounted中再进行频繁 DOM 操作，提升渲染性能。mounted钩子：在客户端，mounted钩子可用于操作已渲染的 DOM 元素。但在 SSR 性能优化场景下，要谨慎使用，因为它仅在客户端执行，过多操作可能导致客户端与服务端渲染结果不一致（Hydration 问题）。如果必须在客户端进行 DOM 操作，可先在服务端计算好相关数据，在mounted中快速基于已有数据完成 DOM 操作。例如，初始化一些第三方插件（如轮播图插件），但要确保插件初始化不影响首次渲染性能。updated钩子：在数据更新时，updated钩子会被触发。在性能优化方面，要避免在此钩子中进行不必要的 DOM 操作。因为每次数据更新都可能触发updated，频繁 DOM 操作会严重影响性能。如果有复杂的数据更新逻辑，可在updated中使用防抖或节流技术，减少不必要的 DOM 重绘和回流。在 SSR 场景下，同样要注意客户端与服务端数据一致性，防止因数据更新导致 Hydration 失败。beforeDestroy钩子：在组件销毁前执行，可用于清理工作，如清除定时器、解绑事件监听器等。在 SSR 中，虽然组件的生命周期可能与客户端有所不同，但良好的清理操作能避免内存泄漏等问题，保证应用的长期性能稳定。
2. 结合具体性能问题
- 白屏时间过长：通过在
created钩子中提前预取数据，可减少组件等待数据的时间，缩短白屏时间。例如电商商品详情页组件，在created中获取商品详情数据，在服务端渲染时，数据已准备好，可直接用于生成 HTML，加快页面呈现给用户的速度。 - 频繁 DOM 操作：利用
beforeMount钩子提前准备 DOM 相关数据，在mounted中减少不必要的 DOM 操作次数。如一个可折叠面板组件，在beforeMount中根据初始数据决定面板是否展开，添加相应的class，在mounted时只需简单初始化样式，避免在后续更新过程中频繁切换class导致的重绘回流。 - 内存泄漏：在
beforeDestroy钩子中清理事件监听器等资源。比如在一个地图组件中，添加了地图点击事件监听器，如果在组件销毁时不清理，会导致内存泄漏，随着组件的反复创建和销毁，内存占用会不断增加，影响应用性能。
3. SSR 实现细节
- 在 SSR 环境下，Vue 组件首先在服务端被渲染为 HTML 字符串。
created和beforeMount钩子会在服务端执行，这使得我们可以在服务端就获取数据并进行一些准备工作。例如，通过调用后端 API 获取页面数据，填充到组件的data中，然后生成包含数据的 HTML。 - 当 HTML 传输到客户端后，Vue 会在客户端进行 Hydration 操作，即把服务端渲染的静态 HTML 激活为可交互的 Vue 应用。此时，
mounted钩子在客户端执行，我们要确保在此钩子中的操作不会破坏服务端渲染的结果，并且能快速完成初始化工作，提升用户交互体验。 - 在数据更新时，无论是在服务端还是客户端，
updated钩子都会触发。在 SSR 中，要确保数据更新逻辑在服务端和客户端保持一致，避免因不一致导致 Hydration 失败。例如，通过 Vuex 管理共享数据，在服务端和客户端都通过相同的 mutation 来更新数据，保证两边数据状态的一致性。