生命周期
概念:
Vue中的生命周期指的是 组件 从创建到销毁一个过程,在这个过程中,我们在每一个特定的阶段会触发一些方法( 这些方法具备一些功能),我们给这些方法起了个名字叫做( 生命周期钩子函数/ 组件钩子 )
用途:
因为我们想在生命周期钩子中实现项目功能,那么我们必须知道每一个钩子函数的具体用途
Vue的生命周期分为三个阶段,分别为: 初始化,运行中, 销毁,一共8个钩子函数
注意: 生命周期钩子函数不允许写成箭头函数+配置项写在生命周期钩子函数的上
初始化阶段:
beforeCreate
- 组件创建前触发,目的是为了组件的生命周期 和 组件中的事件做准备
- 数据没有获得,真实dom也没有渲染出来
- 可以进行数据请求,提供了一次数据修改的机会
- 执行一次
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
<p> {{ msg }} </p>
</div>
</template>
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello world'
}
},
beforeCreate () {//不允许是箭头函数
console.log( '1-beforeCreate' )
console.log( 'data',this.msg )
console.log( '真实dom',document.querySelector('p'))
fetch('./data.json')
.then( res => res.json())
.then( data => console.log( data ))
.catch( error => console.log( error ))
}
})
new Vue({
el: '#app'
})
created
- 组件创建结束
- 数据得到了,真实dom没有渲染出来
- 可以进行数据请求,提供了一次数据修改的机会
- 执行了一次
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello world'
}
},
created () {
console.log( '2-created' )
console.log( 'data',this.msg )
console.log( '真实dom',document.querySelector( 'p' ))
fetch('./data.json')
.then( res => res.json())
.then( data => console.log( data ))
.catch( error => console.log( error ) )
}
})
new Vue({
el: '#app'
})
beforeMount
- 组件挂载前
- 任务: 判断el 判断 template
-如果el没有,那么我们需要手动挂载,如果有,那么判断template
-如果template有,那么进行render函数,render函数作用是将jsx转换成vdom对象模型
-如果template没有,那么通过 outerHTML 手动书写模板
<div class="box"></div>
var box = document.querySelector('.box')
// box.innerHTML = 'Hello'
box.outerHTML = 'Hello'
- 数据可以获得,但是真实dom还没有渲染
- 可以进行数据请求,也提供了一次数据修改的机会
- 执行一次
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello world'
}
},
beforeMount () {
console.log( '3-beforeMount' )
console.log( 'data',this.msg )
console.log( '真实dom',document.querySelector( 'p' ))
fetch('./data.json')
.then( res => res.json())
.then( data => console.log( data ))
.catch( error => console.log( error ) )
}
})
new Vue({
el: '#app'
})
mounted
- 组件挂载结束
- 数据获得了,真实dom也获得了
- 可以进行数据请求,也就可以修改数据
- 执行了一次
- 可以进行真实dom的操作了( 可以进行第三方库的实例化了 )
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello world'
}
},
mounted () {
console.log( '4-mounted' )
console.log( 'data',this.msg )
console.log( '真实dom',document.querySelector( 'p' ))
fetch('./data.json')
.then( res => res.json())
.then( data => console.log( data ))
.catch( error => console.log( error ))
}
})
new Vue({
el: '#app'
})
//1. 数据请求一般写在created里面
//2. 第三方库实例化我们一般会往mounted中写
运行中阶段:
触发条件:数据更新
beforeUpdate
- 更新前
- 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
- 这个钩子函数更多的是内部进行一些操作,我们就不在多干预了
- 可以触发多次
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
<p> {{ msg }} </p>
</div>
</template>
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello world'
}
},
created () {
console.log( '2-created' )
console.log( 'data',this.msg )
console.log( '真实dom',document.querySelector( 'p' ))
fetch('./data.json')
.then( res => res.json())
.then( data => console.log( data ))
.catch( error => console.log( error ) )
}
})
new Vue({
el: '#app'
})
//数据更新触发
updated
- 更新结束
- 真实dom得到了,数据也得到了( 更新后的 )
- 动态数据获取( 第三方库实例化 )
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello world'
}
},
updated () {
console.log( '6-updated' )
console.log( 'data',this.msg )
console.log( '真实dom',document.querySelector('p'))
fetch('./data.json')
.then( res => res.json())
.then( data => console.log( data ))
.catch( error => console.log( error ))
}
})
new Vue({
el: '#app'
})
销毁阶段:
触发条件: 当组件销毁时
Vue的销毁有两种形式
- 通过开关的形式 - 外部销毁
- 通过调用 $destroy 方法 - 内部销毁
beforeDestroy和destroyed
这两个钩子功能一致的,这两个钩子没有太大的区别
作用:
用来做善后的,比如计时器的关闭 第三方实例的删除
<div id="app">
<Hello v-if = "flag"></Hello>
<button @click = "flag = !flag"> 切换 </button>
</div>
<template id="hello">
<div>
hello
</div>
</template>
Vue.component('Hello',{
template: '#hello',
mounted() {
this.time = setInterval(() => {
console.log( 123 )
},1000)
},
beforeDestroy () {
console.log( 'beforeDestroy')
clearInterval( this.time )
},
destroyed () {
console.log( 'destroyed')//关闭计时器
}
})
new Vue({
el: '#app',
data: {
flag: true
}
})
外部销毁:通过开关的形式(html外壳结构不能销毁,组件可以销毁)
<div id="app">
<Hello v-if = "flag"></Hello>
<button @click = "flag = !flag"> 切换 </button>
</div>
<template id="hello">
<div>
hello
</div>
</template>
Vue.component('Hello',{
template: '#hello',
beforeDestroy () {
console.log( 'beforeDestroy')
},
destroyed () {
console.log( 'destroyed')
}
})
new Vue({
el: '#app',
data: {
flag: true
}
})
内部销毁:通过调用$destroy方法(html和组件都被销毁)
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div class="hello-box">
hello
<button @click = "clear"> 销毁 </button>
</div>
</template>
Vue.component('Hello',{
template: '#hello',
methods: {//配置项写在钩子函数上面
clear () {
this.$destroy()
}
},
beforeDestroy () {
console.log( 'beforeDestroy')
document.querySelector( '.hello-box' ).remove()
},
destroyed () {
console.log( 'destroyed')//关闭计时器
}
})
new Vue({
el: '#app'
})