面试题：Vue组件生命周期优化之常见钩子函数应用

Question

在Vue组件生命周期中，created和mounted钩子函数通常用于不同场景。请举例说明在哪些具体业务场景下会优先使用created钩子函数进行数据初始化，哪些场景下会使用mounted钩子函数，并且阐述一下在这两个钩子函数中进行异步数据请求对组件渲染和性能的影响。

Answer 1

优先使用created钩子函数进行数据初始化的场景

1. 数据预计算：当组件需要在渲染前对一些数据进行复杂计算，而这些计算并不依赖于DOM时，适合在created中进行。例如，一个统计订单总价、税费等信息并展示的组件，在获取订单数据后，可以在created钩子中计算这些数据。
2. 初始化全局状态：如果组件需要初始化一些全局状态（如Vuex中的状态），并且这些操作与DOM无关，created钩子是很好的选择。例如，初始化用户登录状态相关的全局数据。

优先使用mounted钩子函数的场景

1. 操作DOM元素：当组件需要直接操作DOM元素时，必须在mounted钩子中进行。例如，初始化第三方插件（如swiper轮播插件），这些插件通常需要在DOM元素挂载到页面后才能进行初始化操作。
2. 依赖于DOM结构的计算：如果需要基于DOM结构进行计算，如获取元素的尺寸、位置等信息，应在mounted钩子中进行。例如，一个需要根据父元素宽度动态调整自身布局的组件。

两个钩子函数中进行异步数据请求对组件渲染和性能的影响

1. 在created钩子中进行异步数据请求：
   • 组件渲染：由于created钩子在组件挂载前执行，此时组件的DOM还未创建。如果异步请求的数据用于组件模板的渲染，可能会导致模板在数据未返回时渲染，出现短暂的空白或默认值展示，待数据返回后再重新渲染。
   • 性能影响：由于无需等待DOM渲染完成就可以发起请求，能够尽早开始数据获取，在一定程度上可以减少整体的数据加载时间。但如果数据请求时间较长，且组件依赖该数据渲染，可能会造成页面长时间白屏。
2. 在mounted钩子中进行异步数据请求：
   • 组件渲染：mounted钩子在组件挂载完成后执行，此时组件的DOM已经创建。如果异步请求的数据用于更新DOM，不会出现模板先渲染默认值再重新渲染的情况，用户体验相对较好。
   • 性能影响：因为要等待DOM渲染完成后才发起请求，会增加数据请求的延迟，整体加载时间可能变长。如果数据请求和DOM操作频繁，可能会引起页面重排重绘，影响性能。