目录
1. beforeCreate(vu2)
2. created(vu2)
3. setup(vu3)
4. beforeMount
5. mounted
6. beforeUpdate
7. updated
8. beforeDestroy
9. destroyed
Vue.js 的生命周期是指 Vue 实例从创建到销毁的整个过程中的各个阶段。在 Vue 中,有多个关键的生命周期钩子,它们允许开发者在特定的事件点执行代码,从而实现组件的初始化、数据绑定、事件处理、渲染更新、状态管理以及清理等操作。
1. beforeCreate(vu2)
- 用途:在 Vue2实例创建之前调用,此时实例的属性和数据尚未初始化。
- 使用方法:在 Vue 实例的
methods
或者computed
属性中定义函数,并在需要执行的代码前使用beforeCreate
生命周期钩子。
2. created(vu2)
- 用途:在 Vue2 实例创建之后,数据和属性已经被初始化,但是 DOM 还未被渲染。
- 使用方法:同样在
methods
或computed
中定义函数,并在需要执行的代码前使用created
生命周期钩子。
3. setup(vu3)
- 用途:在 Vue3 实例创建之后,数据和属性已经被初始化,但是 DOM 还未被渲染。
4. beforeMount
- 用途:在 Vue 实例挂载到 DOM 之前调用。
- 使用方法:定义函数,并在需要执行的代码前使用
beforeMount
生命周期钩子。
5. mounted
- 用途:在 Vue 实例挂载到 DOM 之后调用,此时 DOM 已经被渲染。
- 使用方法:定义函数,并在需要执行的代码前使用
mounted
生命周期钩子。
6. beforeUpdate
- 用途:在 Vue 实例的属性或数据发生变化之前调用,用于执行一些清理或更新操作。
- 使用方法:定义函数,并在需要执行的代码前使用
beforeUpdate
生命周期钩子。
7. updated
- 用途:在 Vue 实例的属性或数据发生变化之后,DOM 更新之后调用。
- 使用方法:定义函数,并在需要执行的代码前使用
updated
生命周期钩子。
8. beforeDestroy
- 用途:在 Vue 实例销毁之前调用,用于执行一些清理操作,如取消定时器、解除事件监听等。
- 使用方法:定义函数,并在需要执行的代码前使用
beforeDestroy
生命周期钩子。
9. destroyed
- 用途:在 Vue 实例销毁之后调用,此时 Vue 实例的所有属性、事件监听器和子组件都已经被移除。
- 使用方法:定义函数,并在需要执行的代码前使用
destroyed
生命周期钩子。