组件初始化阶段
在 beforeCreate 钩子之前,Vue 会整合所有选项(如 data、methods 等)。此时可以访问 options,但访问 data 时会得到 [function data]。在 beforeCreate 钩子中,组件实例已经初始化,但还没有进行数据观测,因此无法访问 data 和 methods等
在 created 钩子中,Vue 已经处理完 data 和 methods等,并将它们转化成响应式数据。此时,组件实例已经完成数据观测,可以访问 data 和 methods,但模板还没有编译,虚拟 DOM 也还没有生成
模板编译和挂载阶段
在 beforeMount 钩子中,模板已经编译成渲染函数,并且虚拟 DOM 已经创建,但还没有挂载到真实 DOM。因此在 beforeMount 中可以访问虚拟 DOM,但不能访问真实 DOM
在 mounted 钩子中,组件已经挂载到真实 DOM,此时可以访问和操作真实 DOM
更新阶段
当响应式数据发生变化时,会触发 setter,然后调用 beforeUpdate 钩子。在 beforeUpdate 中,可以访问组件更新前的数据和状态
在 beforeUpdate 之后,Vue 会调用副作用函数 trigger,创建新的虚拟 DOM,并开始进行 diff 操作。diff 完成后,更新真实 DOM,并进入 updated 钩子。在 updated 钩子中,可以访问更新后的数据和 DOM
销毁阶段
在 beforeDestroy 钩子中,组件实例即将销毁,此时可以进行清理工作,如移除事件监听器和清理定时器等
在 destroyed 钩子中,组件实例已经销毁,所有的绑定和事件监听器都被移除。此时无法访问 DOM,但数据依然可以访问,只是已经失去响应式