VUE学习：vue基础02——VUE生命周期函数
提示：
本文为VUE栏目：VUE学习：vue基础02——VUE生命周期函数
VUE学习：vue基础02——VUE生命周期函数
- 前言
- VUE
-
- VUE生命周期函数
-
- 声明周期实例
- 生命周期函数三大类
-
- 1.创建期间函数
- 2.运行期间函数
-
- 组件的激活和停用
- 3.销毁期间函数
前言
本文学习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("实例被调用后调用，此时所有绑定的事件和数据都会被移除");
}