概念:
vue的生命周期是指vue实例从创建到销毁的过程,通过vue的生命周期我们可以在不同的阶段进行不同的逻辑操作。
生命周期钩子函数及具体发生的事情:
⑴beforeCreate(创建前):在此生命周期函数执行的时候,data 和 methods 中的数据都还没有初始化。
⑵created(创建后):在此生命周期函数中,data 和 methods 都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早只能在 created 中操作。
⑶beforeMount(载入前/挂载前):在此生命周期函数执行的时候,模板已经在内存中编译好了,但是尚未挂载到页面中去,此时页面还是旧的。
⑷mounted(载入后/挂载后):此时页面和内存中都是最新的数据,这个钩子函数是最早可以操作 dom 节点的方法。
⑸beforeUpdate(更新前):此时页面中显示的数据还是旧的,但是 data 中的数据是最新的,且页面并未和最新的数据同步。
⑹Updated(更新后):此时页面显示数据和最新的 data 数据同步。
⑺beforeDestroy(销毁前):当执行该生命周期函数的时候,实例身上所有的 data,所有的 methods 以及过滤器…等都处于可用状态,并没有真正执行销毁。
⑻destroyed(销毁后):此时组件已经被完全销毁,实例中的所有的数据、方法、属性、过滤器…等都已经不可用了。
下面两个钩子函数一般配合使用
⑼activated(组件激活时):和上面的 beforeDestroy 和 destroyed 用法差不多,但是如果我们需要一个实例,在销毁后再次出现的话,用 beforeDestroy 和 destroyed 的话,就太浪费性能了。实例被激活时使用,用于重复激活一个实例的时候
⑽deactivated(组件未激活时):实例没有被激活时。
⑾errorCaptured(错误调用):当捕获一个来自后代组件的错误时被调用
也可以简单理解为
beforeCreate:通常用于插件开发中执行一些初始化任务
created:组件初始化完毕,可以访问各种数据,获取接口数据等
beforemount:这时还只是一个空壳,访问不到真实的数据和dom
mounted:dom已创建,可用于获取访问数据和dom元素;访问子组件等,这是最早可以访问dom的钩子函数
beforeUpdate:此时data中的数据是最新的,而view(视图/页面)层还未更新,可用于获取更新前各种状态
updated:完成view(视图/页面)层的更新,更新后,此时data中的数据和view中的数据都是最新的
beforeDestroy:实例被销毁前调用,可用于一些定时器或订阅的取消,这时所有的实例和功能还都可以正常使用
destroyed:销毁一个实例。可清理它与其它实例的连接,所有与本实例相关的方法属性全部失效
父子组件生命周期执行的顺序:
加载渲染过程: 父 beforeCreate --> 父 created --> 父 beforeMount --> 子 beforeCreate --> 子 created--> 子 beforeMount --> 子 mounted --> 父 mounted
更新过程: 父 beforeUpdate --> 子 beforeUpdate --> 子 updated --> 父 updated
销毁过程: 父 beforeDestroy --> 子 beforeDestroy --> 子 destroyed --> 父 destroyed