Vue实例从创建到销毁的过程，就是Vue的生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom – > 渲染、更新–>渲染、卸载等一系列过程，我们称这是Vue的生命周期。
它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易行程好的逻辑。
（开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染、卸载）主要分为八个阶段：
beforeCreate（创建前） created（创建后） beforeMount（载入前） mounted（载入后） beforeUpdate（更新前）, updated（更新后） beforeDestroy（销毁前） destroyed（销毁后）
beforeCreate data 和 $el 都没有初始化 全部为 undefined
created data 初始化完成，但 $el 没有初始化
beforeMount data 和 $el 均已存在，但 DOM 为虚拟DOM 仍未完全加载 eg：
当data中数据发生改变时触发update相关函数
beforeUpdate 渲染完成，并监测到data发生变化，在变化的数据重新渲染视图之前会触发，这也是重新渲染之前最后修改数据的机会
updated 监测到data发生变化，并完成渲染更新视图之后触发
beforeDestory 实例销毁之前调用 ， 实例仍然完全可用。
destroyed 实例销毁后调用。调用后，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
beforeCreate, created, beforeMount, mounted 。
beforeCreate 可以在此时加一些loading效果，在created时进行移除
created 需要异步请求数据的方法可以在此时执行，完成数据的初始化
mounted 当需要操作dom的时候执行，可以配合$.nextTick 使用进行单一事件对数据的更新后更新dom
updated 当数据更新需要做统一业务处理的时候使用
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。(调用第三方插件可以放在mounted里边)
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
本文地址：https://blog.csdn.net/weixin_45586723/article/details/107257823
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论