vue 生命周期函数的学习
本篇文章记录下今天看传智"vue的生命周期函数"视频的操作笔记：
代码：
<html>
<header>
<title></title>
<script src="vue-2.4.0.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7.css" />
</header>
<body>
<div id="app">
<input type="button" value="Update" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'ok'
},
methods:{
show(){
console.log('执行了show方法');
}
},
// ------------------ 实例初始化加载阶段，四个事件 -------------------
beforeCreate(){ //这是我们遇到的第一个生命周期函数，表示示例完全被创建出来之前，会执行它
//console.log(this.msg); undefined
//this.show(); undefin is not defined
// 注意: 在beforeCreate生命周期执行的时候，data和method中的数据都还没有初始化
},
created(){ //这是遇到的第二个生命周期函数
// 注意: 在create中，data和methods都已经被初始化好了
console.log(this.msg);
this.show();
},
beforeMount(){ //这是遇到的第三个生命周期函数，表示模版已经在内存中编辑完成了，但是尚未把模版渲染到页面中
console.log(document.getElementById("h3").innerText); //{{ msg }}
// 注意: 在beforeMount执行的时候，页面中的元素，还没有真正被替换过来，只是之前写的一些模版字符串
},
mounted(){ //这是遇到的第四个生命周期函数，表示内存中的模版已经真实的挂载在页面中，用户已经可以看到渲染好的页面了
console.log(document.getElementById("h3").innerText); // ok
// 注意: mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例就算加载完毕了
},
// ------------------ 接下来是运行中的两个事件 -----------------------
beforeUpdate(){ //这时候，表示我们的界面还没有被更新
console.log(document.getElementById("h3").innerText); // ok
console.log(this.msg); // no
// 注意: 当执行beforeUpdate时，页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新数据保持同步
},
updated(){
console.log(document.getElementById("h3").innerText); // no
console.log(this.msg); // no
// 注意: updated 事件执行时，页面和data数据已经保持同步了，都是最新的
}
});
</script>
</body>
</html>
