生命周期
4(指生命周期的四个阶段) 8(指每个阶段有两个钩子函数) 2(指缓存的钩子函数) 1(捕获错误的钩子函数)
vue(实例) 组件的一生和人的一生极其相似
vue生命周期四个阶段:
- 创建 创建虚拟dom
- 挂载 由虚拟dom 变成真实dom
- 更新 更新数据 -> 更新dom元素
- 销毁 组件淘汰的时候,结束使命
11个生命周期钩子函数(到达某个时间阶段自动执行的函数):
- beforeCreate 创建之前
- created 创建结束
- beforeMount 挂载之前
- mounted 挂载结束
- beforeUpdate (数据)更新前
- updated (数据)更新结束
- activated 被 keep-alive 缓存的组件激活时调用
- deactivated 被 keep-alive 缓存的组件禁用时调用
- beforeDestroy (组件)销毁之前调用
- destroyed (组件)销毁完成调用
- errorCaptured (2.5.0新增的)
常用:
- created 做网络请求
- mounted 也可以做网络请求 还可以做初始化dom
- beforeDestory/destoryed 在组件销毁前擦屁股、解决遗憾
生命周期_创建
<!--以组件为例、全局的-->
<body>
<div id="app">
<hehe></hehe>
</div>
<template id="hehe">
<div class = 'test'>
<p ref='p'>{{num}}</p>
</div>
</template>
<script>
Vue.component('hehe',{
template:'#hehe',
data(){
return {
num:1
}
},
beforeCreate() {
// 创建之前 没有初始化数据 同时没有真实dom 基本不用
console.log('创建之前')
console.log('this',this)
console.log('data',this.num)
console.log('dom',this.$refs['p'])
},
created(){
//创建结束 有数据 没有dom
//有数据 就可以修改数据 在这里修改数据不会触发运行中的更新的生命周期
// 可以网络请求
console.log('创建结束')
console.log('this',this)
console.log('data',this.num)
this.num=5
console.log('dom',this.$refs['p'])
}
})
let vm=new Vue({
el:"#app",
})
</script>
</body>
生命周期_挂载
<body>
<div id="app">
<hehe></hehe>
</div>
<template id="hehe">
<div class = 'test'>
<p ref='p'>{{num}}</p>
</div>
</template>
<script>
Vue.component('hehe',{
template:'#hehe',
data(){
return {
num:1
}
},
beforeCreate() {
// 创建之前 没有初始化数据 同时没有真实dom 基本不用
console.log('创建之前')
},
created(){
//创建结束 有数据 没有dom
// 可以修改数据 在这里修改数据不会触发运行中的更新的生命周期
// 可以网络请求
console.log('创建结束')
},
beforeMount() {
// 挂载之前和created类似 有数据 可以改数据 没有dom
// 可以做网络请求
console.log('挂载之前')
console.log('this',this)
console.log('data',this.num)
console.log('dom',this.$refs['p'])
},
mounted(){
//挂载结束 有数据 有dom
// 可以修改数据 可以修改dom
// 初始化的操作 swiper
console.log('挂载结束')
console.log('this',this)
console.log('data',this.num)
this.num=5
console.log('dom',this.$refs['p'])
}
})
let vm=new Vue({
el:"#app",
})
</script>
</body>
生命周期_更新
<!--更新是当数据data发生改变-->
<body>
<div id="app">
<hehe></hehe>
</div>
<template id="hehe">
<div class = 'test'>
<p ref='p'>{{num}}</p>
<button @click='add'>add</button>
</div>
</template>
<script>
Vue.component('hehe',{
template:'#hehe',
data(){
return {
num:1
}
},
methods: {
add(){
this.num++
}
},
beforeCreate() {
// 创建之前 没有初始化数据 同时没有真实dom 基本不用
console.log('创建之前')
},
created(){
//创建结束 有数据 没有dom
// 可以修改数据 在这里修改数据不会触发运行中的更新的生命周期
// 可以网络请求
// this.num=5
console.log('创建结束')
},
beforeMount() {
// 挂载之前和created类似 有数据 可以改数据 没有dom
// 可以做网络请求
console.log('挂载之前')
},
mounted(){
//挂载结束 有数据 有dom
// 可以修改数据 可以修改dom
// 初始化的操作 swiper
console.log('挂载结束')
// this.num=7
},
beforeUpdate() {
// 挂载之后数据更新的时候触发,挂载之前数据跟新不会触发
// 此时数据 是更新之后的
// 此dom 是更新之前的
console.log('更新之前')
console.log('this',this)
console.log('data',this.num)
console.log('dom', this.$refs.p.innerHTML)
},
updated() {
// 数据与dom都跟新完了触发
// 此时数据 是更新之后的
// 此dom 也是更新之后的
// 注意做数据的修改操作 可能引起死循环
console.log('更新之前')
this.num=Math.random()
console.log('this',this)
console.log('data',this.num)
console.log('dom', this.$refs.p.innerHTML)
},
})
let vm=new Vue({
el:"#app",
})
</script>
</body>
生命周期_销毁
<body>
<div id="app">
<button @click='toggle'>toggle</button>
<hehe v-if='show'></hehe>
</div>
<template id="hehe">
<div class = 'test'>
<p ref='p'>{{num}}</p>
</div>
</template>
<script>
Vue.component('hehe',{
template:'#hehe',
data(){
return {
num:1
}
},
mounted() {
console.log('组件挂载')
},
beforeDestroy() {
// 销毁之前 有数据 有this 也都没用
// 有dom
console.log('销毁之前')
console.log(this)
console.log(this.num)
console.log(this.$refs['p'].innerHTML)
},
destroyed() {
// 销毁之后 有数据 有this 但是没有用
// 没有dom
console.log('销毁之后')
console.log(this)
console.log(this.num)
console.log(this.$refs['p'].innerHTML)
}
})
let vm=new Vue({
el:"#app",
data:{
show:false
},
methods: {
toggle(){
this.show=!this.show
}
},
})
</script>
</body>
综上四个例子
介绍这八个生命周期,是从这三个方向来分析下手:
- 有没有this对象
- 有没有数据
- 有没有dom
销毁生命周期的使用
<body>
<div id="app">
<button @click='toggle'>toggle</button>
<!-- 呵呵组件 创建销毁 -->
<hehe v-if='show'></hehe>
</div>
<template id="hehe">
<div class = 'test'>
<p ref='p'>{{num}}</p>
</div>
</template>
<script>
Vue.component('hehe',{
template:'#hehe',
data(){
return {
num:1
}
},
mounted(){
//将计时器挂载当前实例上
this.timer=setInterval(() => {
console.log(1)
}, 1000);
},
destroyed() {
// 回顾组件的一生 寻找遗留的遗憾、错事 然后解决遗憾(擦屁股)
// 全局计时器 全局事件监听
clearInterval(this.timer)
},
})
let vm=new Vue({
el:"#app",
data:{
show:false
},
methods: {
toggle(){
this.show=!this.show
}
},
})
</script>
</body>