vue学习十五---生命周期函数

var vm=new Vue({
el:'#app',
data:{
msg:'ok'
},
methods:{
show(){
console.log('执行了show方法 ');

}
},
beforeCreate(){
//    这是我们遇到的第一个生命周期函数，表示实例被完全创建之前执行他
/* console.log("msg is :",this.msg);
this.show()
在beforeCreate生命函数周末执行时，data和methods中的数据还没有初始化
*/
},
created(){   //这是  遇到第二个生命周期函数，
/* console.log("msg is :",this.msg);
t his.show() */
// 在created生命函数周末执行时，data和methods中的数据已经被初始化
// 如果要调用data数据 或者调用methods方法，只能在此之后执行
},
beforeMount(){  //这是  遇到第二个生命周期函数，表示模板已经编译完成，但是尚未把模板渲染到页面中
// console.log(document.getElementById('h3').innerText);
// 在beforeMouth() 执行的时候，页面中的元素还没有真正被替换过来，只是之前写的一些模板字符串
},
mounted(){ //这是  遇到第二个生命周期函数，表示模板已经编译完成，并且已经把模板渲染到页面中
// console.log(document.getElementById('h3').innerText);
// 这个函数是实例创建周期的最后一个函数 当执行完此函数，表示实例已经被完全创建好了，此时 ， 如果没有其他操作，
// 这个实例 就静静的躺在我们内存中 一动不动
},

//   接下来是运行中的两个事件
beforeUpdate(){  //这时候表示我们得界面还没有被更新，数据已经更新了 才会触发此函数
// console.log("页面中的元素内容是：",document.getElementById('h3').innerText);
// console.log("data is :",this.msg);

// 得出结论 当执行beforeUpdate 时候 ，页面中显示的数据还是旧的，data是最新的  此时页面中的数据还没有更新，保持同步

},
updated(){
console.log("页面中的元素内容是：",document.getElementById('h3').innerText);
console.log("data is :",this.msg);

}
});
</script>

• 点赞
• 收藏
• 分享
• 文章举报