Vue 框架原理：钩子函数的时序与 DOM 操作

在 Vue 框架的开发中，钩子函数扮演着至关重要的角色，为我们提供了在组件生命周期中的关键时刻执行自定义逻辑的途径。其中，created() 和 mounted() 两个钩子函数尤其值得关注，它们在处理 DOM 操作时有着微妙的差异。

created() 钩子：虚拟 DOM，并非真实 DOM

在 created() 钩子函数执行时，Vue 框架刚刚完成了组件实例的创建，此时组件尚未被渲染到实际的 DOM 中。也就是说，此时访问 DOM 元素将返回 null，因为虚拟 DOM 尚未与真实 DOM 绑定。

因此，在此钩子函数中进行任何 DOM 操作都是徒劳无功的。如果此时执意进行 DOM 操作，会导致 JavaScript 引擎报错。为了解决这个问题，Vue 框架提供了 Vue.nextTick() 函数，它允许我们在下一次 DOM 更新循环中执行回调函数，从而确保 DOM 已完成渲染。

mounted() 钩子：真实 DOM，自由操作

与 created() 钩子相反，mounted() 钩子函数在组件首次渲染到真实 DOM 中后执行。此时，DOM 元素已经存在，我们可以自由地进行任何 DOM 操作。

通常情况下，我们在 mounted() 钩子中执行以下任务：

• 初始化组件状态
• 执行 DOM 绑定操作
• 与外部元素交互

一个示例：延迟 DOM 操作

为了更清楚地理解这两个钩子函数在 DOM 操作中的时序差异，我们来看一个示例：

import Vue from 'vue'

new Vue({
  el: '#app',
  created() {
    console.log('created:', document.getElementById('app')) // 输出 null
  },
  mounted() {
    console.log('mounted:', document.getElementById('app')) // 输出 DOM 元素
  }
})

在这个示例中，我们在 created() 钩子中尝试获取 DOM 元素，但它会返回 null。而在 mounted() 钩子中，我们可以成功获取到 DOM 元素。

总结

在 Vue 框架中，created() 和 mounted() 两个钩子函数在处理 DOM 操作时有着不同的时序：

• created() 钩子：组件已创建，但尚未渲染到真实 DOM 中，DOM 操作无效。
• mounted() 钩子：组件已渲染到真实 DOM 中，可以自由进行 DOM 操作。

了解这两个钩子函数的时序差异有助于我们在 Vue 框架中编写更健壮、更符合逻辑的代码。