【vue高频面试题—生命周期篇】：created和mounted的区别 一般在哪个声明周期里请求异步数据

created和mounted的区别

• 执行时机：

  • created钩子：在 Vue 实例创建完成后被调用。此时，组件的数据已经完成响应式处理，这意味着可以访问和操作data中的数据以及methods中的方法。不过，此时 DOM 尚未挂载，所以无法访问$el（DOM 元素）。例如，在created钩子中可以对组件的数据进行初始化操作，像设置默认值等。
  • mounted钩子：在实例挂载到真实 DOM 后调用。这是组件已经完成了模板编译，并将生成的 DOM 元素插入到文档中之后执行的钩子。此时，可以通过$el访问真实 DOM 元素，能够进行各种 DOM 操作，如获取元素的高度、宽度，或者初始化一些依赖于 DOM 的第三方插件（如某些图表库需要获取 DOM 容器的尺寸来进行绘制）。

• 应用场景：

  • created：适合进行一些不依赖于 DOM 的初始化操作。例如，初始化数据、发起异步请求获取初始数据用于渲染组件。由于这个阶段 DOM 还未挂载，所以如果操作涉及 DOM 相关的内容，如获取元素位置等，就不适合在这里进行。
  • mounted：用于执行那些需要 DOM 已经存在的操作。比如，操作 DOM 元素的样式、添加事件监听器到特定 DOM 元素等。如果要使用一些需要 DOM 节点作为容器的第三方库，通常也在mounted阶段进行初始化。

请求异步数据的生命周期选择

• 一般更倾向于在created生命周期中请求异步数据。原因如下：

  • 数据准备时机：在created阶段请求数据，当数据返回后，可以及时地将数据填充到组件的响应式数据中。这样，一旦 DOM 挂载完成（进入mounted阶段），组件就可以直接使用已经获取到的数据进行渲染，减少用户等待数据加载的时间。
  • 性能优化角度：在created阶段发起请求可以让数据获取和 DOM 挂载同时进行（假设数据请求较快），提高应用的性能。如果在mounted阶段请求数据，会导致组件先挂载一个没有数据（或者只有部分默认数据）的 DOM 结构，然后等待数据返回后再重新渲染，可能会出现短暂的空白或者数据加载闪烁的情况。
  • 服务器端渲染（SSR）兼容性：在使用服务器端渲染（SSR）的场景下，created钩子在服务器端和客户端都会被执行，这使得数据获取的逻辑更加统一。如果在mounted中请求数据，在 SSR 环境下可能会出现问题，因为服务器端没有真实的 DOM 环境，mounted钩子可能不会按预期执行数据获取操作。