Vue 基础面试题, Vue 中 created 和 mounted 生命周期钩子有什么区别?
Vue 基础面试题, Vue 中 created 和 mounted 生命周期钩子有什么区别?
QA
Step 1
Q:: 面试题: Vue 中 created 和 mounted 生命周期钩子有什么区别？
A:: 答案: 在 Vue 中，生命周期钩子函数是指在组件实例的生命周期过程中，会在特定的时机调用的函数。created 钩子函数在实例被创建后立即调用，这意味着此时组件实例已经初始化了数据观察、属性计算等功能，但还没有挂载到 DOM 上，也就是说还没有实际的 DOM 节点可以访问。mounted 钩子函数在实例被挂载到 DOM 后调用，此时可以访问到真实的 DOM 节点并进行操作。在实际应用中，如果需要在组件实例化后立即获取或处理一些数据但不依赖于 DOM 元素时，可以使用 created 钩子；而如果需要对 DOM 进行操作或依赖于 DOM 的其他库（例如 jQuery）时，则可以在 mounted 钩子中进行。
Step 2
Q:: 面试题: 为什么在 Vue 中有时选择在 created 而不是 mounted 中发起 API 请求？
A:: 答案: 在 created 钩子中发起 API 请求通常是因为不需要依赖 DOM 元素来获取或操作数据。由于 created 在组件实例创建后立即调用，可以确保请求尽早发出，缩短数据获取的延迟时间。如果请求数据与视图渲染无直接关系（例如存储在 Vuex 或其他全局状态中），则更适合在 created 中处理。而 mounted 通常用于需要在 DOM 准备就绪后执行的操作。
Step 3
Q:: 面试题: 在实际开发中，什么时候需要在 mounted 钩子中进行 DOM 操作？
A:: 答案: 通常在实际开发中，当你需要在组件渲染到 DOM 后对 DOM 元素进行操作时，才会在 mounted 钩子中进行 DOM 操作。例如，如果你需要使用第三方库（如 jQuery）操作 DOM 元素，或者需要手动调整某些 DOM 元素的样式或事件监听器，这些操作需要等到 DOM 元素确实挂载到页面上后才能进行。
Step 4
Q:: 面试题: Vue 中可以在哪些生命周期钩子函数中访问到组件的 DOM 元素？
A:: 答案: 组件的 DOM 元素只能在 mounted 及之后的生命周期钩子中访问到。具体来说，mounted、updated、activated 和 beforeDestroy 都可以访问到 DOM 元素。其中，mounted 是第一次挂载时访问 DOM 的时机，updated 在数据变化后更新 DOM，activated 针对 keep-alive 组件的激活时刻，beforeDestroy 则可以在组件销毁前对 DOM 进行最后的操作或清理。