重要提醒:mounted和created
一个是created在before内存编辑完后转到页面挂载,
一个是最早操作DOM要到mounted到操作
只要脱离了mounted就表示组件创建完毕,后续是运行阶段
运行阶段
可以监听其运行.png
0到无数次,when data changes
image.png
image.png
image.png
this is why?为啥没被执行,组件被创建完之后,你这个组件一直没改变当然不执行 ==>参看:7分14s _P32D2_17
image.png
image.png
注意
得出结论当执行beforeUpdate()的时候页面中的数据是旧的,data中的数据是新的,并未保持同步
改变前:
image.png
改变后:
image.png
beforeUpdate() {
var neirong = document.getElementById("h3").innerText
console.log("界面上元素的内容是:" + neirong); //看看这俩同步不同步?
console.log("改变后的内容是:" + this.msg);
//得出结论当执行beforeUpdate()的时候页面中的数据是旧的,data中的数据是新的,并未保持同步
}
当更改了data中的数据,我们首先会进入内存中dom树,然后再更新页面中去
image.png
image.png
image.png
<div id="app">
<input type="button" value="点击改变" @click="msg='no'">
<h3 id="h3"> {{msg}}</h3>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: "this a null for beforeCreated"
},
methods: {
show() {
console.log("执行了show方法");
}
},
beforeCreate() { //这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
// console.log(this.msg);
// ==>undefined
// this.show()
// 在beforeCreate生命周期函数执行的时候,methods和data数据和方法都还没被初始化
},
created() {
// console.log(this.msg);
// this.show()
},
beforeMount() {
//第三个生命周期函数,表示模板在内存编辑完毕,但未渲染到页面中去
var neirong = document.getElementById("h3").innerText
// console.log(neirong);
//在beforeMount执行的时候页面中的元素并未被替换,只是之前写的字符串,
},
mounted() {
var neirong = document.getElementById("h3").innerText
// console.log(neirong);
//最后一个生命周期函数 两两一组,实例完全被创建好了
},
beforeUpdate() {
var neirong = document.getElementById("h3").innerText
// console.log("界面上元素的内容是:" + neirong); //看看这俩同步不同步?
// console.log("改变后的内容是:" + this.msg);
//得出结论当执行beforeUpdate()的时候页面中的数据是旧的,data中的数据是新的,并未保持同步
},
updated() {
var neirong = document.getElementById("h3").innerText
console.log("界面上元素的内容是:" + neirong); //看看这俩还同步不同步?
console.log("改变后的内容是:" + this.msg);
// 这时候页面和data中的数据已经同步了
}
});
</script>
销毁阶段=>还是可用阶段=>不可用阶段
image.png
