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