vue的生命周期
2022-04-15 本文已影响0人
小蜜蜂_1d30
lifecycle.png
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8"/>
<title></title>
<script src="./vue.js"></script>
</header>
<body>
<div id="app">
<button @click="message='下班'">修改data</button>
<h3 id="h3">{{message}}</h3>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"我是message",
},
methods:{
show:function(){
console.log("this is show function")
}
},
beforeCreate(){//这是遇到的第一个生命周期函数,表示实例完全被创建之前可以执行它
//console.log(this.message);
///console.log(this.show());
//注意：在beforeCreate生命周期函数执行的时候data和methods都还没被初始化
},
created(){//这是遇到的第二个生命周期函数
console.log(this.message);
console.log(this.show());
//在created中data和methods都已经初始化了
//如果要执行methods中的方法，或者操作data中的数据，最早只能在created中操作
},
beforeMount(){//这是遇到的第三个周期函数，表示模板已经编译完成，但是尚未把模板渲染到页面上
console.log(document.getElementById("h3").innerText)
//在beforeMount执行的时候，页面中的元素还没有被替换过来，还是之前的
},
mounted(){//这是遇到的第四个生命周期函数，内存中的模板已经渲染到页面上，页面已经被渲染好了 ，mounted是实例创建期间的
//的最后一个函数，当执行完mounted函数，表示实例已经完全创建好了，此时，如果没有其他操作的话，这个实例就静静的躺在内存中，一动不动
},
//接下来的是运行中的两个事件
beforeUpdate(){
//这时候，表示我们的界面还没有被更新[数据更新了吗？更新了]
//console.log('界面上的元素内容'+document.getElementById('h3').innerText);
//console.log("data数据"+this.message)
//结论：当执行beforeUpdate时，页面上的数据还是旧的，此时data数据是最新的，两者尚未同步
},
updated(){
console.log('界面上的元素内容:'+document.getElementById('h3').innerText);
console.log("data数据:"+this.message)
//updated执行时，页面和data的数据都已经是最新的了
}
})
</script>
</body>
</html>
