Vue 基础面试题, DOM 渲染在哪个 Vue 生命周期钩子中就已经完成?
Vue 基础面试题, DOM 渲染在哪个 Vue 生命周期钩子中就已经完成?
QA
Step 1
Q:: DOM 渲染在哪个 Vue 生命周期钩子中已经完成？
A:: DOM 渲染在 Vue 的 mounted 生命周期钩子中已经完成。mounted 钩子是在组件的 DOM 被创建之后立即调用的，在这个阶段可以安全地操作 DOM 元素。
Step 2
Q:: Vue 的生命周期钩子有哪些？它们的执行顺序是怎样的？
A:: Vue 的生命周期钩子主要包括：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。它们的执行顺序如下：
1. beforeCreate：实例初始化之后，数据观测 (data observer) 和事件/watcher 初始化之前调用。
2. created：实例创建完成后调用，此时数据观测已经完成，属性和方法已绑定，但 DOM 尚未生成。
3. beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
5. beforeUpdate：当数据更新时调用，发生在虚拟 DOM 打补丁之前。
6. updated：当由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。
7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed：实例销毁后调用。调用后，Vue 实例的所有指令和事件监听器都会被移除。
Step 3
Q:: 在 beforeMount 和 mounted 之间，Vue 实际上做了什么？
A:: beforeMount 和 mounted 之间，Vue 会创建虚拟 DOM 树，并根据模板中的指令渲染实际的 DOM 元素。这个过程包括生成 VNode、执行数据绑定、应用指令、处理事件等。mounted 钩子函数执行时，DOM 树已经完成挂载。