文章目录
一、Vue 的生命周期钩子函数:
Vue 的生命周期钩子函数包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。这些生命周期函数按照一定的顺序在组件的生命周期中执行。
1、beforeCreate:
- 在实例初始化之后,数据观测 (data observation) 和 event/watcher 事件配置之前被调用。
- 此时组件实例还未被创建,因此无法访问到 data、methods、computed 等属性。
2、created:
- 在实例创建完成后被立即调用。
- 在这一步,实例已经完成了数据观测,属性和方法的运算, watch/event 事件回调。然而,挂载阶段还未开始,$el 属性目前尚不可用。
3、beforeMount:
- 在挂载开始之前被调用:相关的 render 函数首次被调用。
4、mounted:
- el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
- 如果需要访问渲染后的文档,可以在这里使用 vm.$nextTick。
5、beforeUpdate:
- 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
- 这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
6、updated:
- 由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
- 当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作。
7、beforeDestroy:
- 在实例销毁之前调用。在这一步,实例仍然完全可用。
- 适合做一些清理工作,比如解绑定时器,解绑事件等。
8、destroyed:
- 在实例销毁之后调用。
- 适合清理工作,比如清除定时器、解绑事件监听等。
二、使用场景:
- beforeCreate 和 created:
适合执行一些初始化操作,如配置信息的获取、数据初始化等。 - beforeMount 和 mounted:
适合执行和 DOM 相关的操作,如获取 DOM 元素、初始化第三方库等。 - beforeUpdate 和 updated:
适合在数据更新前后执行一些逻辑,比如状态快照、动画效果等。 - beforeDestroy 和 destroyed:
适合执行一些清理工作,如清除定时器、解绑事件监听等。
三、父子组件之间的执行顺序:
- 父组件 beforeCreate
- 父组件 created
- 父组件 beforeMount
- 子组件 beforeCreate
- 子组件 created
- 子组件 beforeMount
- 子组件 mounted
- 父组件 mounted
在父组件的 mounted 阶段,它的子组件才开始 beforeCreate、created、beforeMount、mounted 的生命周期。这是因为子组件的生命周期是在父组件挂载的时候才开始的。