拓展-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:

相关文章
|
4天前
|
JavaScript
Vue实例挂载的过程
Vue实例挂载的过程
33 0
|
14天前
|
JavaScript
vue实例的生命周期
vue实例的生命周期
10 0
|
2月前
|
JavaScript
Vue获取子组件实例对象 ref 属性
Vue获取子组件实例对象 ref 属性
|
2月前
|
JavaScript
Vue实例挂载的过程
Vue实例挂载的过程
37 0
|
3月前
|
缓存 JavaScript 前端开发
Vue.js基础知识解析:探索Vue实例
Vue.js基础知识解析:探索Vue实例
|
3月前
|
JavaScript 前端开发 API
Vue 实例及构造选项 options
Vue 实例及构造选项 options
32 0
|
4月前
|
自然语言处理 JavaScript 前端开发
前端|Vue实例与模板语法
前端|Vue实例与模板语法
24 1
|
4月前
|
JavaScript 前端开发 API
VUE|Vue实例
VUE|Vue实例
39 0
|
4月前
|
JavaScript 前端开发 定位技术
Vue项目使用天地图的方法(Vue引入天地图,创建地图实例
Vue项目使用天地图的方法(Vue引入天地图,创建地图实例
|
4月前
|
运维 JavaScript 前端开发
不知道中午应该吃什么?用vue写个实例帮我们抉择吧
不知道中午应该吃什么?用vue写个实例帮我们抉择吧
68 0
推荐文章
更多