什么是生命周期?
Vue实例从创建到销毁的过程,叫做生命周期。
生命周期分为三个阶段:创建阶段、运行阶段、销毁阶段
什么是生命周期函数(钩子函数)
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数
钩子函数有什么用
这给了用户在不同阶段添加自己的代码的机会。
举例说明Vue钩子函数
页面中写一个div
<div id="app">
<h3 id="h3">{{ msg }}</h3>
<input type="button" value="修改msg" @click="msg='No'" >
</div>
创建一个Vue实例
var vm = new Vue({
el : '#app',
data : {
msg: 'ok',
},
methods: {
show () {
console.log('执行了show方法')
}
},
beforeCreate() {},
created(){},
beforMounte(){},
mounted(){},
beforUpdate(){},
updated(){},
beforDestroy(){},
destroyed(){}
})
beforeCreate() {
console.log(this.msg); //undefined
this.show(); //this.show is not a function
}
在beforeCreate()阶段,data和methods未被初始化
created() {
//如果要使用 data 和 methods 最早只能在 create 中
console.log(this.msg);
this.show();
}
在 create 中,data 和 methods中的数据都初始化好了
beforeMount() {
console.log(document.getElementById('h3').innerHTML); //{{msg}}
},
模板已经在内存中编译完成,但是尚未把模板渲染到页面中,页面中的元素还没被真正替换,只是之前写的模板字符串
mounted() {
// console.log(document.getElementById('h3').innerHTML);
},
内存中的模板已经真实的挂载到页面中,用户已经能看到渲染好的页面了
只要执行完了 mounted 就表示整个 Vue 实例被初始化完毕,此时组件已经脱离了创建阶段,到了运行阶段
//运行阶段
<input type="button" value="修改msg" @click="msg='No'"
beforeUpdate() {
console.log("界面内容:" + document.getElementById('h3').innerHTML);
console.log("data中的数据:" + this.msg);
},
执行 beforeUpdate 的时候,页面数据还是旧的,但是 data 中的数据是最新的,页面尚未和最新数据同步
updated() {
console.log("界面内容:" + document.getElementById('h3').innerHTML);
console.log("data中的数据:" + this.msg);
},
updated事件执行的时候,表示页面和data数据已经保持同步了
创建阶段的钩子函数
beforCreate:data 和 methods中的数据都没初始化
created:data 和 methods中的数据都初始化好了,如果要使用 data 和 methods 最早只能在 create 中
beforeMount:模板已经在内存中编译完成,但是尚未把模板渲染到页面中。页面中的元素还没被真正替换,只是之前写的模板字符串
mounted:内存中的模板已经真实的挂载到页面中,用户已经能看到渲染好的页面了。mounted是实例创建期间的最后一个生命周期函数,表示实例已经被完全创建好了
运行阶段的钩子函数
beforUpdate:页面数据还是旧的,但是 data 中的数据是最新的,页面尚未和最新数据同步
updated:updated事件执行的时候,表示页面和data数据已经保持同步了
销毁阶段的钩子函数
beforDestroy
destroyed