拓展-Vue 中实例的生命周期1(1)|学习笔记

简介: 快速学习拓展-Vue 中实例的生命周期1(1)

开发者学堂课程【React 入门与实战拓展-Vue 中实例的生命周期1(1)】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8120


拓展-Vue 中实例的生命周期1(1)


一、Vue 中实例的生命周期的介绍

(1)、生命周期的概念:

Vue 实例有一个完整的生命周期,从开始创建初始化、编译模板、挂载 DOM 、渲染一更新一渲染、卸载等一系列过程,这个过程被称为 Vue 的生命周期。

举个例子:

在网游里面,先创建一个角色,一共有99级,需要从1级开始升级,升级的整个过程就是生命周期,可能1级的时候穿的是布衣,拿的是木剑,没有解锁背包,背包里只有五个格子,然后到五级背包就有十个格子,是因为在到五级这一瞬间触发了一个事件所以才会变成十个格子,在特定阶段去执行某个特定事件这个事件就是生命周期函数。

不管是那个玩家,只要到五级了,必然会触发这个事件,那么这个事件不分是谁,不分是什么角色,只要某个特定阶段必然会执行。

(2)、组件的生命周期:

生命周期的概念:

每个组件的实例,从创建、到运行、直到销毁,在这三个过程中,会出发一些列事件,这些事件就叫做组件的生命周期函数;

(3)React 组件生命周期分为三部分:

1、组件创建阶段:

特点:—辈子只执行

componentWillMount:

render:

componentDidMount:

2、组件运行阶段:

按需,根据 props 属性或 state 状态的改变,有选择性的执行0到多次componentWillReceiveProps:

shouldComponentUpdate:

componentWillUpdate:render:

componentDidUpdate:

3、组件销毁阶段:—辈子只执行一次

componentWillUnmount:

相关文章
|
3月前
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子
|
1月前
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
1月前
|
JavaScript
|
1月前
|
JavaScript
vue3 生命周期
【10月更文挑战第14天】vue3 生命周期
|
5月前
|
JavaScript
vue的生命周期
vue的生命周期
33 3
|
5月前
|
JavaScript 前端开发
vue的生命周期
vue的生命周期
36 2
|
1月前
|
开发者
vue3生命周期钩子变化
【10月更文挑战第4天】
|
1月前
|
JavaScript 前端开发 API
深入探索挖掘vue3 生命周期
【10月更文挑战第10天】
32 0
|
2月前
|
JavaScript 前端开发 API
Vue3基础(十yi)___常用生命周期函数___setup___onMounted___onUpdated
本文介绍了Vue 3中的常用生命周期函数,包括`setup`、`onBeforeMount`、`onMounted`、`onBeforeUpdate`、`onUpdated`、`onBeforeUnmount`和`onUnmounted`,并解释了它们与Vue 2生命周期钩子的对应关系。文章通过代码示例展示了这些生命周期钩子在组件中的使用时机和场景。
44 0
|
3月前
|
JavaScript 前端开发 程序员
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)
这篇文章详细介绍了Vue的生命周期和各个阶段的钩子函数,包括`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeDestroy`和`destroyed`。文章通过图解、方法说明、代码实例和测试效果,阐述了每个钩子函数的作用和使用场景,帮助读者深入理解Vue实例从创建到销毁的整个过程。
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)
下一篇
无影云桌面