vue组件生命周期

生命周期

生命周期函数

beforeCreate

• 时机：在实例初始化之后，数据观测 (data observer) 和事件/ watcher 事件配置之前被调用。此时 $el 和 data 都未被初始化，this 指针还不可用（即 this 仍然是 undefined）
• 使用场景：适合于在数据初始化之前做一些准备工作。
  • 初始化外部库或服务：如果你的应用依赖于某些外部库或服务，你可以在 beforeCreate 钩子中进行初始化。
  • 初始化全局状态：在 beforeCreate 钩子中可以做一些全局状态的初始化工作。
  • 初始化 Vuex store：如果你的应用使用了 Vuex，可以在 beforeCreate 钩子中初始化 store。

created

• 时机：实例已经完全创建完成，data 已经观测，property 也已经初始化，事件/watcher 事件配置完成，但是还没有挂载 $el。
  Vue 实例已经创建完成，this 指针可用，可以访问实例上的数据和方法。
  此时模板还未编译，DOM 还未生成，因此不能访问 DOM 元素
• 使用场景：适合于进行数据初始化、异步数据获取等操作。例如，在此阶段可以通过 AJAX 请求获取数据，并将其设置到 Vue 实例的数据属性上

beforeMount

• 时机：在 Vue 实例被挂载到 DOM 之前被调用。这个钩子在实例的挂载过程开始之前触发，但在 DOM 实际生成之前在。
  在 beforeMount 钩子被调用时，虚拟 DOM 已经生成，但实例尚未被挂载到 DOM 上，因此不能访问到真实的 DOM 元素
• 使用场景：适合于在挂载之前对模板进行检查或修改。例如，验证模板是否正确，或对模板进行某些预处理

mounted

• 时机：实例已经被挂载到 DOM 中，完成数据绑定过程。可以在这个阶段进行 DOM 操作。
• 使用场景：适合于进行 DOM 操作，如添加事件监听器、与外部系统交互等。可以在此阶段调用外部库的方法，如初始化地图或图表

beforeUpdate

• 时机：在 Vue 实例的数据发生变化但 DOM 还未更新时触发。这意味着在 beforeUpdate 钩子中，你可以访问到最新的数据，但还不能访问到更新后的 DOM
• 使用场景：在数据更新之前执行一些逻辑处理，比如计算属性的重新计算、取消旧数据相关的事件监听器、异步操作

updated

• 时机：数据更新后调用，发生在虚拟 DOM 打补丁之后。
• 使用场景： 适合于进行 DOM 操作，如更新元素样式、尺寸等。例如，可以在此阶段根据新的数据更新图表或调整布局
• 注意事项：注意不要在此阶段直接修改数据，否则可能会进入无限循环。

beforeDestroy

• 时机：实例销毁之前调用。
• 使用场景：适合于在实例销毁前做一些清理工作，如取消事件监听器、移除定时器等。例如，在组件销毁时，可以清理定时器、取消网络请求等

destroyed

• 时机：实例销毁后调用。此时 Vue 实例指示的所有指令和事件监听器都会被移除，所有的子实例也会被销毁
• 使用场景：适合于在实例销毁后做一些收尾工作

vue组件渲染全过程

实例化阶段

Vue 会先执行组件中的 JS 代码，包括数据属性、计算属性、方法等的定义。
beforeCreate、created

模板编译阶段

对模板进行编译，将模板中的指令解析成对应的 DOM 操作。这个阶段并不会立即触发任何生命周期钩子，但它为后续的挂载和渲染做好了准备。

挂载和渲染阶段

将组件挂载到 DOM 中，并根据模板和数据渲染出最终的 DOM 结构
beforeMount、mounted

数据更新阶段

beforeUpdate、updated

组件销毁阶段

beforeDestroy、destroyed