-
什么是生命周期?
当前组件在创建到销毁经历的一系列过程,称之为生命周期 -
生命周期的分为几个阶段?每个阶段有哪些钩子函数
-
生命周期分为3个阶段,这三个阶段分别是: 初始化 、 运行中 、 销毁
- 初始化阶段:有4个钩子函数 , 触发条件是自动的
- beforeCreate
- 组件即将创建,进行组件事件和生命周期的初始化
- 可以在这里进行数据请求 ,个人不推荐
- created
- 组件创建完成
- 项目中:
1) 异步请求接口数据
2) 数据修改
- beforeMount
- 组件即将挂载
- 判断根实例组件是否有el选项,如果没有,那么手动挂载,判断根实例组件中的其他子组件是否有template选项,如果没有,那么使用outerHTML插入
- 项目中:
1) 异步请求接口数据
2) 数据修改
- mounted
- 组件挂载结束
- 使用真实DOM替换VDOM
- 项目中
1) 异步请求接口数据
2) 数据修改
3) 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的) )
- 总结: 初始化过程中在项目中使用
数据请求:created
DOM操作: mounted
数据修改: beforeMount created mounted
- beforeCreate
- 运行中阶段:有2个钩子函数 : 触发条件是: 当data选项中的数据发生改变时
- beforeUpdate:
内部操作 : vdom生成和diff的对比
我们可以不使用 - updated
Rdom已经生成,可以进行异步数据请求得到的dom渲染的第三方库实例化
- beforeUpdate:
- 销毁阶段: 有2个钩子函数
- beforeDestory: 组件即将销毁,准备调用 $destroy() 方法
- destoryed: 组件销毁结束
这两个钩子函数没有什么区别,功能相似
项目中:
这两个钩子函数都可以用来做善后,把一些计时器,第三方库实例化出来的实例 - 组件销毁的两种方式:
- 使用$destroy()方法(内部销毁)
缺点: 会将组件的模板也保留下来 - 使用开关销毁(外部销毁)
v-if
这种类型的销毁不会留有模板
- 使用$destroy()方法(内部销毁)
有一个钩子函数可以不写,这个钩子函数就是我们 render 函数
- 初始化阶段:有4个钩子函数 , 触发条件是自动的
-
分隔符——————————————————————————————
-
项目中如何使用?
//初始化阶段_________________________________________ beforeCreate () { /* 这个阶段:组件创建前 data data选项中的数据获取不到 RDOM 真实dom拿不到 项目中: 没什么用 但是这个阶段是一个对事件和生命周期的准备阶段,也是必不可少的 */ }, created () { /* 这个阶段:组件创建结束 data data选项中的数据获到了 RDOM 真实dom拿不到 项目中: 数据的修改 异步数据请求 */ }, beforeMount () { /* 这个阶段:组件即将挂载 data data选项中的数据获到了 RDOM 拿不到 项目中: 数据的修改 异步数据请求 */ }, mounted () { /* 这个阶段:组件挂载结束了 data: 可以获得数据 RDOM: 拿到了 项目中: 数据修改 异步数据请求 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的) ) */ } //运行中阶段_________________________________________ beforeUpdate () { //表示组件即将更新 // vdom --diff vdom的不同(patch对象) /* 这个阶段: data: 拿到了 RDOM: 获得 这个阶段进行的是vdom的生成和diff算法的对比,都是内部进行的,我们在项目中可以不使用 */ }, updated () { // 组件更新结束 //通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新 /* 这个阶段: 动态数据的渲染,进行dom操作( 第三方库的实例化 ) */ }, // --------------------------------------销毁 ------------- //一般不进行操作___>可以用来做善后 beforeDestroy () { console.log( 'beforeDestroy ') }, destroyed () { clearInterval( this.time ) console.log( 'destroyed') }
-
名词解释:
钩子函数: 钩子函数就是options配置项中的一个方法,在特定的触发条件( 时机 )下会自动触发 -
除了根实例组件以外,其他的组件中的数据项 data 必须是一个函数,而且这个函数必须返回一个对象
为什么是函数呢?
原因:我们希望组件的数据是独立的,有一定作用域的
为什么返回值是对象?
原因: 是为了符合 数据驱动 原理设计,让observer将data选项中的数据设置 getter 和 setter -
其他选项写在生命周期之上