Vue : 生命周期

目录

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 生命周期钩子。