一.生命周期阶段
vue生命周期分为四个阶段
第一阶段(创建阶段):beforeCreate,created
第二阶段(挂载阶段):beforeMount(render),mounted
第三阶段(更新阶段):beforeUpdate,updated
第四阶段(销毁阶段):beforeDestroy,destroyed
二.生命周期函数
1.beforecreated()
介绍:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时组件的选项对象还未被创建,el
和 data
都为 undefined
,无法访问到数据和 DOM。
示例:
<script>
export default {
beforeCreate() {
// 很少在此阶段进行操作,因为组件实例尚未完全创建
console.log('beforeCreate 钩子被调用');
},
// ...
}
</script>
2.created()
介绍:实例创建完成后立即调用,此时实例已经完成以下配置:数据观测、属性和方法的运算、watch/event事件回调,挂载阶段还没开始。
示例:
created() {
console.log('created: 实例创建完成');
}
3.beforeMount
介绍:
在挂载开始之前被调用:相关的 render 函数首次被调用。在挂载之前执行一些操作,例如修改 DOM 结构等。
示例:
beforeMount() {
console.log('beforeMount: 挂载开始之前');
}
4.mounted
介绍:el
被新创建的 vm.$el
替换,并挂载到实例上去之后调用该钩子。可以在这个阶段操作 DOM,执行与 DOM 相关的逻辑。
示例:
mounted() {
console.log('mounted: 实例已挂载');
}
5.beforeUpdate
介绍:
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个阶段对更新之前的状态进行访问。
示例:
beforeUpdate() {
console.log('beforeUpdate: 数据更新之前');
}
6.updated
介绍:
由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。可以在这个阶段操作 DOM,但避免在此期间更改数据,因为可能导致无限循环更新。
示例:
updated() {
console.log('updated: 数据更新完成');
}
7.beforeUnmount
(Vue 3)
介绍:实例卸载之前调用。在实例被卸载之前进行一些清理操作,例如取消事件监听等。
示例:
beforeUnmount() {
console.log('beforeUnmount: 实例卸载之前');
}
8.unmounted
(Vue 3)
介绍:实例被卸载之后调用。 在实例被卸载之后进行一些清理操作,例如销毁定时器等。
示例:
unmounted() {
console.log('unmounted: 实例已卸载');
}