Vue的生命周期

image.png

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

1674979783958.png

1.new Vue()创建Vue对象
2.执行beforeCreate()事件钩子：在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

3.Observe Data 开始监控Data对象数据变化
4.init events内部初始化事件
5.执行created事件钩子：实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化。

6. 执行beforeMount() 事件钩子，挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

7.执行mounted(）事件钩子：创建阶段完成，页面渲染完毕，进入运行阶段。此时我们可以通过$refs来访问到真实的DOM结构。

8.执行beforeUpdate()事件钩子：内存中的数据已经改变，页面上的还没更新
9.执行updated(）事件钩子：页面上数据和内存中的一致

10.执行beforeDestory()函数钩子：触发这个函数时，还没开始销毁，此时刚刚脱离运行阶段。data，methods，指令之类的都在正常运行。在这个生命周期函数中我们可以将绑定的事件进行移除。