-
boforeCreate 創建之前
-
created 創建之后
-
boforeMount 實例化之前
-
mounted 實例化之后
話不多說，直接上代碼
<div id="test">
{{a}}
</div>
var myVue = new Vue({
el: "#test",
data: {
a: "HelloWord"
},
beforeCreate: function() {
console.log("創建前")
console.log(this.a)
console.log(this.$el)
},
created: function() {
console.log("創建之后");
console.log(this.a)
console.log(this.$el)
},
beforeMount: function() {
console.log("mount之前")
console.log(this.a)
console.log(this.$el)
},
mounted: function() {
console.log("mount之后")
console.log(this.a)
console.log(this.$el)
},
beforeUpdate: function() {
console.log("更新前");
console.log(this.a)
},
updated: function() {
console.log("更新完成");
console.log(this.a)
},
beforeDestroy: function() {
console.log("銷毀前");
console.log(this.a)
console.log(this.$el)
},
destroyed: function() {
console.log("已銷毀");
console.log(this.a)
console.log(this.$el)
}
});
測試中，發現
beforeCreate創建之前 data是undefined、el也是undefined
created創建之后 data是a的值：HelloWord、el是undefined
beforeMount實例化之前 data是a的值：HelloWord、el是虛擬的（即<div id="test">{{a}}</div> ）
mounted實例化之后 data是a的值：HelloWord、el是真實的（即 <div id="test">HelloWord</div>）
本人 初學vue，可能文章有些詞語說得不正確，望園友請指出
文章有問題隨時聯系我轉載請注明出處