什么是生命周期呢?
当前组件在创建到销毁经历的一系列过程,称之为生命周期
生命周期的分为几个阶段?每个阶段有哪些钩子函数
生命周期分为3个阶段,这三个阶段分别是: 初始化 、 运行中 、 销毁;
- 初始化阶段:有4个钩子函数 , 触发条件是自动的
- beforeCreate
1. 组件即将创建,进行组件事件和生命周期的初始化
2. 项目中一般不使用( 兵哥 )
3. 有的开发者也会在这里进行数据请求//初始化 beforeCreate () { /* 这个阶段:组件创建前 data data选项中的数据获取不到 RDOM 拿不到 项目中: 没什么用 但是这个阶段是一个对事件和生命周期的准备阶段,也是必不可少的 */ console.log('1-beforeCreate') console.log( 'data', this.money ) console.log( '真实DOM',document.querySelector('h3') ) },
- created
1. 组件创建完成
2. 项目中:
1) 异步请求接口数据
2) 数据修改created () { // 组件创建结束 /* 这个阶段: data data选项中的数据获到了 RDOM 拿不到 项目中: 数据的修改 异步数据请求 */ this.money = 20000 console.log('2-created') console.log( 'data', this.money ) console.log( '真实DOM',document.querySelector('h3') ) },
- beforeMount
1. 组件即将挂载
2. 判断根实例组件是否有el选项,如果没有,那么手动挂载,判断根实例组件中的其他子组件是否有template选项,如果没有,那么使用outerHTML插入
3. 项目中:
1) 异步请求接口数据
2) 数据修改beforeMount () { //组件即将挂载 /* 这个阶段: data data选项中的数据获到了 RDOM 拿不到 项目中: 数据的修改 异步数据请求 */ this.money = 10000000 console.log('3-beforeMount') console.log( 'data', this.money ) console.log( '真实DOM',document.querySelector('h3') ) },
- mounted
1. 组件挂载结束
2. 使用真实DOM替换VDOM
3. 项目中
1) 异步请求接口数据
2) 数据修改
3) 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的) )mounted () { //组件挂载结束了 /* 这个阶段: data: 可以获得数据 RDOM: 拿到了 项目中: 数据修改 异步数据请求 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的) ) */ this.time = setInterval( () => { console.log( 1 ) },1000) document.querySelector('h3').style.background = 'red' console.log('4-mounted') console.log( 'data', this.money ) console.log( '真实DOM',document.querySelector('h3') ) },
- 总结
初始化过程中在项目中使用
数据请求:created
DOM操作: mounted
数据修改: beforeMount created mounted
- beforeCreate
- 运行中阶段:有2个钩子函数 : 触发条件是: 当data选项中的数据发生改变时
- beforeUpdate:
内部操作 : vdom生成和diff的对比
我们可以不使用beforeUpdate () { //表示组件即将更新 vdom --diff--> vdom的不同(patch对象) /* 这个阶段: data: 拿到了 RDOM: 获得 这个阶段进行的是vdom的生成和diff算法的对比,都是内部进行的,我们在项目中可以不使用 */ console.log(' 1- beforeUpdate ') console.log( 'data', this.money ) console.log( '真实DOM',document.querySelector('h3') ) },
- updated
Rdom已经生成,可以进行异步数据请求得到的dom渲染的第三方库实例化updated () { // 组件更新结束 , 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新 /* 这个阶段: 动态数据的渲染,进行dom操作( 第三方库的实例化 ) */ document.querySelector('h3').style.background = 'blue' console.log(' 2- updated ') console.log( 'data', this.money ) console.log( '真实DOM',document.querySelector('h3') ) },
- beforeUpdate:
- 销毁阶段: 有2个钩子函数,这两个钩子函数没有什么去别,功能很相似
- beforeDestory: 组件即将销毁,准备调用 $destroy() 方法
beforeDestroy () { console.log( 'beforeDestroy ') },
- destoryed: 组件销毁结束
destroyed () { clearInterval( this.time ) console.log( 'destroyed') }
- 组件销毁的两种方式:
1. 使用$destroy()方法(内部销毁)
缺点: 会将组件的模板也保留下来
2. 使用开关销毁(外部销毁)
v-if
这种类型的销毁不会留有模板<div id="app"> <button @click = "flag = false"> 销毁 </button> <Hello v-if = "flag"></Hello> </div> <template id="hello"> <div> <input type="text" v-model = "money"> <h3> {{ money }} </h3> </div> </template>
Vue.component( 'Hello',{ template: '#hello', data () { return { money: 2000 } } }) new Vue({ // el: '#app', data: { msg: 'hello 1902', flag: true } }).$mount('#app')
- beforeDestory: 组件即将销毁,准备调用 $destroy() 方法
什么是钩子函数
钩子函数就是options配置项中的一个方法,在特定的触发条件( 时机 )下会自动触发
除了根实例组件以外,其他的组件中的数据项 data 必须是一个函数,而且这个函数必须返回一个对象
为什么是函数呢?
原因:我们希望组件的数据是独立的,有一定作用域的
为什么返回值是对象?
原因: 是为了符合 数据驱动 原理设计,让observer将data选项中的数据设置 getter 和 setter
注意:其他配置项要写在生命周期的前面