Vue3 生命周期钩子
Vue.js 中的生命周期钩子函数是指在组件实例的创建、更新、销毁等过程中,Vue 自动调用的一系列方法。在这些步骤中,组件会触发一系列称为"生命周期钩子"的函数,允许开发者在特定时机执行自定义代码。
生命周期钩子的注册与使用
mounted 钩子:此钩子在组件完成初始渲染并生成 DOM 节点后触发。例如:
export default { mounted() { console.log(`组件已挂载。`); } }
其他常用钩子:除了 mounted,还有 updated 和 unmounted 等钩子,它们在实例的不同生命周期阶段被调用。
生命周期钩子的注意事项
this 上下文:所有生命周期钩子函数中的 this 自动指向调用它的组件实例。
避免使用箭头函数:定义生命周期钩子时,不要使用箭头函数,因为这会导致无法通过 this 获取组件实例。
通过合理使用生命周期钩子,开发者可以在组件的不同阶段执行特定的逻辑,增强组件的灵活性和功能。
下面是实例生命周期的图表:
以下是 Vue.js 生命周期钩子函数
钩子名称 | 触发时机 |
---|---|
beforeCreate | 实例初始化之后,数据观测和事件配置之前调用。 |
created | 实例创建完成后立即调用,此时实例已经完成数据观测、属性和方法的运算、watch/event 事件回调。 |
beforeMount | 在挂载开始之前被调用:相关的 render 函数首次被调用。 |
mounted | el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。 |
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。 |
beforeUnmount | 实例卸载之前调用。 |
unmounted | 实例被卸载之后调用。 |
以下是详细介绍 Vue 组件的生命周期钩子:
Vue.js 中的生命周期钩子函数是指在组件实例的创建、更新、销毁等过程中,Vue 自动调用的一系列方法。通过这些钩子函数,可以在组件的不同生命周期阶段执行特定的操作。以下是详细介绍 Vue 组件的生命周期钩子:
1. beforeCreate
- 说明: 实例初始化之后,数据观测和事件配置之前调用。
- 用法: 可以在这个阶段初始化一些未被 Vue 代理的数据。
实例:
实例
beforeCreate() {
console.log('beforeCreate: 实例刚刚被创建');
}
console.log('beforeCreate: 实例刚刚被创建');
}
2. created
- 说明: 实例创建完成后立即调用,此时实例已经完成以下配置:数据观测、属性和方法的运算、watch/event事件回调,挂载阶段还没开始。
- 用法: 可以在这个阶段访问并修改数据,但还没有挂载 DOM。
实例:
实例
created() {
console.log('created: 实例创建完成');
}
console.log('created: 实例创建完成');
}
3. beforeMount
- 说明: 在挂载开始之前被调用:相关的 render 函数首次被调用。
- 用法: 在挂载之前执行一些操作,例如修改 DOM 结构等。
实例:
实例
beforeMount() {
console.log('beforeMount: 挂载开始之前');
}
console.log('beforeMount: 挂载开始之前');
}
4. mounted
- 说明:
el
被新创建的vm.$el
替换,并挂载到实例上去之后调用该钩子。 - 用法: 可以在这个阶段操作 DOM,执行与 DOM 相关的逻辑。
实例:
实例
mounted() {
console.log('mounted: 实例已挂载');
}
console.log('mounted: 实例已挂载');
}
5. beforeUpdate
- 说明: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
- 用法: 可以在这个阶段对更新之前的状态进行访问。
实例:
实例
beforeUpdate() {
console.log('beforeUpdate: 数据更新之前');
}
console.log('beforeUpdate: 数据更新之前');
}
6. updated
- 说明: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
- 用法: 可以在这个阶段操作 DOM,但避免在此期间更改数据,因为可能导致无限循环更新。
实例:
实例
updated() {
console.log('updated: 数据更新完成');
}
console.log('updated: 数据更新完成');
}
7. beforeUnmount
(Vue 3)
- 说明: 实例卸载之前调用。
- 用法: 在实例被卸载之前进行一些清理操作,例如取消事件监听等。
实例:
实例
beforeUnmount() {
console.log('beforeUnmount: 实例卸载之前');
}
console.log('beforeUnmount: 实例卸载之前');
}
8. unmounted
(Vue 3)
- 说明: 实例被卸载之后调用。
- 用法: 在实例被卸载之后进行一些清理操作,例如销毁定时器等。
实例:
实例
unmounted() {
console.log('unmounted: 实例已卸载');
}
console.log('unmounted: 实例已卸载');
}
生命周期钩子执行顺序
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate(当数据变化时触发)
- updated(当数据变化时触发)
- beforeUnmount
- unmounted
实例
以下是一个完整的 Vue 组件示例,展示了所有生命周期钩子函数的使用:
实例
const LifecycleDemo = {
template: `<div>{{ message }}</div>`,
data() {
return {
message: 'Hello, Vue!'
};
},
beforeCreate() {
console.log('beforeCreate: 实例刚刚被创建');
},
created() {
console.log('created: 实例创建完成');
},
beforeMount() {
console.log('beforeMount: 挂载开始之前');
},
mounted() {
console.log('mounted: 实例已挂载');
},
beforeUpdate() {
console.log('beforeUpdate: 数据更新之前');
},
updated() {
console.log('updated: 数据更新完成');
},
beforeUnmount() {
console.log('beforeUnmount: 实例卸载之前');
},
unmounted() {
console.log('unmounted: 实例已卸载');
}
};
const app = Vue.createApp({
components: {
LifecycleDemo
}
});
app.mount('#app');
template: `<div>{{ message }}</div>`,
data() {
return {
message: 'Hello, Vue!'
};
},
beforeCreate() {
console.log('beforeCreate: 实例刚刚被创建');
},
created() {
console.log('created: 实例创建完成');
},
beforeMount() {
console.log('beforeMount: 挂载开始之前');
},
mounted() {
console.log('mounted: 实例已挂载');
},
beforeUpdate() {
console.log('beforeUpdate: 数据更新之前');
},
updated() {
console.log('updated: 数据更新完成');
},
beforeUnmount() {
console.log('beforeUnmount: 实例卸载之前');
},
unmounted() {
console.log('unmounted: 实例已卸载');
}
};
const app = Vue.createApp({
components: {
LifecycleDemo
}
});
app.mount('#app');
尝试一下 »
这个实例会在控制台打印出每个生命周期钩子函数的日志,帮助理解各个生命周期阶段的顺序和用途。