官网给出了如下图示：
image1.png
image2.png
由该图我们了解到vue的生命周期有8种，分别是 beforeCreate, created, beforeMount,mounted, beforeUpdate, updated,destroyed。所以我们创建一个简单的vue实例,在不同的生命周期下打印this.message,this.$el,观察dom渲染和挂载情况。
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>2333</title>
<script type="text/javascript" src='../vue.js'></script>
<script type="text/javascript">
window.onload = function(){
var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" name="sss" v-model="message"/>
{{message}}
</div>
</body>
</html>
截图如下：
图1.1 html样式
图1.2 打印结果
当改变输入框的内容时：
图2.1 update变化前后
注意：关于this.message在update前后值相同的情况，我认为因为这个并不是监听前后的变化，而是你在修改前这个值，因为只要修改就会触发更新前和后，这个值已经改变了，所以拿到的都是改后的值。所以要监测前后变化还是应该尝试打印dom。
网友评论