面试题：DOM 渲染在哪个 Vue 生命周期钩子中就已经完成？

在 Vue 的生命周期中，DOM 渲染完成 的阶段是 mounted 钩子。

---

详细说明

1. mounted 钩子

• 触发时机：在 Vue 实例挂载到 DOM 后调用。
• 特点：
  • 此时 Vue 实例的模板已经编译完成，并且已经将渲染结果插入到 DOM 中。
  • 可以访问和操作 DOM 元素。
  • 适合执行依赖 DOM 的操作，如初始化第三方库、绑定事件监听器等。

2. 示例

<template>
  <div ref="myElement">Hello Vue!</div>
</template>

<script>
export default {
  mounted() {
    // DOM 渲染已完成，可以操作 DOM
    const element = this.$refs.myElement;
    console.log(element.textContent); // 输出：Hello Vue!
  }
}
</script>

---

相关生命周期钩子对比

钩子函数	触发时机	DOM 状态
beforeCreate	实例初始化之前	DOM 未生成
created	实例创建完成	DOM 未生成
beforeMount	挂载之前	DOM 未生成
mounted	挂载完成	DOM 已渲染完成
beforeUpdate	数据更新之前	DOM 未更新
updated	数据更新导致 DOM 重新渲染后	DOM 已更新
beforeDestroy	实例销毁之前	DOM 仍然存在
destroyed	实例销毁之后	DOM 已被移除

---

注意事项

• 在 mounted 钩子中，可以确保 DOM 已经渲染完成，但如果是异步组件或动态组件，可能需要使用 $nextTick 确保 DOM 更新完成。
• 如果需要操作子组件的 DOM，确保子组件也已经挂载完成。

示例：使用 $nextTick

mounted() {
  this.$nextTick(() => {
    // 确保 DOM 更新完成
    const element = this.$refs.myElement;
    console.log(element.textContent);
  });
}

---

总结

• mounted 是 Vue 生命周期中 DOM 渲染完成的钩子。
• 在此钩子中，可以安全地操作 DOM 或执行依赖 DOM 的逻辑。
• 如果需要确保 DOM 更新完成，可以使用 $nextTick。