提示:
本文为VUE栏目:VUE学习:vue基础02——VUE生命周期函数
前言
本文学习vue基础的生命周期函数。
提示:以下是本篇文章正文内容,下面案例可供参考
VUE
VUE生命周期函数
vue生命周期:表示vue从创建到运行再到结束的这期间,发生的各种事件和状态统称为生命周期。
声明周期钩子和声明周期函数是相同的意思,只是叫法上不同。他们都包含声明周期函数的事件和处理。都是自动触发的。
声明周期实例
<body>
<div id="app">
<h3>{{msg}}</h3>
<button type="button" v-on:click="change">按钮</button>
<button type="button" @click="destory">销毁实例</button>
</div>
</body>
<script>
let info="sadasdasdasd";
new Vue({
el: "#app",
data: {
msg: "你好,世界",
info
},
methods: {
show(){
console.log("我是vue实例methods中定义的函数");
},
change(){
this.msg="你被我改变了";
},
destory:function(){
this.$destory;
this.$destory();
}
},
beforeCreate: function () {
},
created(){
},
beforeMount(){
},
mounted(){
},
beforeUpdate(){
},
updated(){
},
activated(){
},
deactivated(){
},
beforeDestroy(){
},
destroyed(){
}
});
</script>
生命周期函数三大类
1.创建期间函数
beforeCreate:实例创建之前,此时此时只有el的值被挂载,data中和methods中绑定的数据和方法都不可用
beforeCreate: function () {
console.log("beforeCreate函数:data中的值是:" + this.msg);
console.log(this.show);
console.log("beforeCreate函数执行完毕!");
},
created:实例化vue后自动调用,此时data和methods中绑定的数据和方法正常使用
created(){
console.log("created函数:data的值是:"+this.msg);
console.log(this.show);
console.log("created函数执行完毕!");
},
beforeMount:模板已经编译,组件已经加载,但是未渲染到页面
beforeMount(){
console.log("beforeMount");
},
mounted:模板已经渲染到页面(该函数执行表示vue实例真正初始化完成)
mounted(){
console.log("mounted");
},
2.运行期间函数
beforeUpdate:状态更新之前,此时data中的值已经更新,但是页面未重新渲染,页面上调用data的位置的值还未更新
beforeUpdate(){
console.log("beforeUpdate函数:data中的值是:"+this.msg);
console.log(`页面中的值是${document.querySelector("h3").innerText}`);
}
updated:状态更新之后,此时data中的值已经更新,页面渲染完毕,此时data中的值和页面上显示的data的值相同。
updated(){
console.log("updated函数,data中的值是:"+this.msg);
console.log(`页面中的值是${document.querySelector("h3").innerText}`);
},
组件的激活和停用
activated(){
console.log("keep-alive组件激活时调用");
},
deactivated(){
console.log("keep-alive组件被停用");
},
3.销毁期间函数
beforeDestroy:实例销毁之前,此时实例仍然可用。 (执行销毁和彻底销毁之间的这个状态)。
beforeDestroy(){
console.log("实例被销毁之前,此时实例正常可用");
console.log(this.msg);
},
destroyed:实例销毁之后触发。
destroyed(){
console.log("实例被调用后调用,此时所有绑定的事件和数据都会被移除");
}