Vu生命周期2023

什么是生命周期？

每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。

beforeCreate( 创建前 )

• 组件被创建之前会调用，data、methods都没有初始化，一般在这个阶段不进行操作。

created( 创建完成 )

• 这个时候，Vue实例中的data、methods已经被初始化，属性也被绑定，但是此时组件的template还没有被挂载，还是虚拟dom，真实dom还没有生成。
• 一般在created里面发送网络请求 ，监听watch数据 等等。

beforeMount( 组件挂载之前 )

• 此时模板已经编译完成，但是还没有渲染到页面中，（即为虚拟dom加载为真实dom）
• 一般在这个阶段不做操作

mounted（ 组件挂载完成 ）

• 虚拟DOM生成真实DOM完成，此时模板已经被渲染成真实DOM
• 作用：获取DOM，使用DOM

beforeUpdate( 组件更新之前 )

• 更新前状态（view层的数据还没有改变，data中的数据已经改变了），重新渲染之前触发，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。只有view上面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发。也就是说数据已经改变了，DOM还没有更新。

updated（ 组件更新完成 ）

• 数据已经更改完成，dom也重新render完成。

beforeUnmount( 组件卸载之前 )

• 当这个钩子被调用时，组件实例依然还保有全部的功能。
• 作用：清除计时器等等

unmounted( 组件卸载完成 )

• 在一个组件实例被卸载之后调用。
• 作用：卸载事件监听