Vue : 生命周期

目录

[1. beforeCreate(vu2)](#1. beforeCreate(vu2))

[2. created(vu2)](#2. created(vu2))

[3. setup(vu3)](#3. setup(vu3))

[4. beforeMount](#4. beforeMount)

[5. mounted](#5. mounted)

[6. beforeUpdate](#6. beforeUpdate)

[7. updated](#7. updated)

[8. beforeDestroy](#8. beforeDestroy)

[9. destroyed](#9. destroyed)


Vue.js 的生命周期是指 Vue 实例从创建到销毁的整个过程中的各个阶段。在 Vue 中,有多个关键的生命周期钩子,它们允许开发者在特定的事件点执行代码,从而实现组件的初始化、数据绑定、事件处理、渲染更新、状态管理以及清理等操作。

1. beforeCreate(vu2)

  • 用途:在 Vue2实例创建之前调用,此时实例的属性和数据尚未初始化。
  • 使用方法 :在 Vue 实例的 methods 或者 computed 属性中定义函数,并在需要执行的代码前使用 beforeCreate 生命周期钩子。

2. created(vu2)

  • 用途:在 Vue2 实例创建之后,数据和属性已经被初始化,但是 DOM 还未被渲染。
  • 使用方法 :同样在 methodscomputed 中定义函数,并在需要执行的代码前使用 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 生命周期钩子。
相关推荐
wuhen_n19 小时前
LeetCode -- 15. 三数之和(中等)
前端·javascript·算法·leetcode
脾气有点小暴19 小时前
scroll-view分页加载
前端·javascript·uni-app
前端开发爱好者21 小时前
VSCode 重磅更新!要收费了?
前端·javascript·visual studio code
wuhen_n21 小时前
LeetCode -- 1:两数之和(简单)
javascript·算法·leetcode·职场和发展
假装我不帅1 天前
jquery.nicescroll使用
前端·javascript·jquery
安_1 天前
js 数组splice跟slice
开发语言·前端·javascript
叫我阿柒啊1 天前
从Java全栈到前端框架:一场真实的技术面试对话
java·vue.js·spring boot·微服务·typescript·前端开发·后端开发
Maxkim1 天前
「✍️JS原子笔记 」深入理解JS数据类型检测的4种核心方式
前端·javascript·面试
小高0071 天前
Elips-Core:轻量级 Node.js Web 框架核心实现
前端·javascript·node.js
Aotman_1 天前
Vue MutationObserver 监听
前端·javascript·vue.js·elementui·前端框架·ecmascript