本文已参与[新人创作礼]活动,一起开启掘金创作之路。
生命周期,即生命周期回调函数、生命周期函数、生命周期钩子。是Vue在关键时刻调用的一些特殊名称的函数。生命周期函数的名字不可修改,但函数的具体内容是程序员按照需求编写的。生命周期函数中的this指向的是vm或组件实例对象。
Vue官网对生命周期的描述:cn.vuejs.org/v2/api/
尚硅谷里面讲解Vue生命周期时,对生命周期的讲解:
父子组件中的钩子函数执行顺序:
挂载阶段:父组件created
> 子组件created
> 子组件mounted
> 父组件mounted
更新阶段:父组件beforeUpdate
> 子组件beforeUpdated
> 子组件updated
> 父组件updated
销毁阶段:父组件beforeDestroy
> 组件beforeDestroy
> 子组件destroyed
> 父组件destroyed
beforeCreate
和created
,创建之前和创建完成,指的是在数据监测和数据代理创建之前和创建完成时。
mounted
以前的为挂载阶段(包括mounted)。mounted
:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作。
updated
、beforeUpdate
为更新阶段,当数据更新时调用。
数据和页面不一样时是在beforeUpdate
阶段。
beforeDestroy
和destroyed
,需要通过调用vm.$destroy(),完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。触发 beforeDestroy
和 destroyed
的钩子。在大多数场景中不应该调用这个方法。最好使用 v-if
和 v-for
指令以数据驱动的方式控制子组件的生命周期。
实例销毁后调用。destroyed
钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。该钩子在服务器端渲染期间不被调用。
beforeDestroy
:清除定时器、解绑自定义事件、取消订阅消息等收尾工作。
销毁后借助Vue开发者工具看不到任何信息。
销毁后自定义事件会失效,但原生DOM事件依然有效。
beforeDestroy
中虽然可以操作数据,但是即使操作数据,不会再触发更新流程了,页面不会更新。