vue的生命周期函數(shù)有11個看尼，常用的8個生命周期函數(shù)必須要掌握
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生命周期函數(shù)</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({
el: '#app',
data: {text: "Hello World!"},
template: "<div>{{text}}</div>", // template必須要有一個根元素
beforeCreate: function () {
console.log("beforeCreate","初始化vue實例前的一些準(zhǔn)備");
},
created: function() {
console.log(this);
console.log(this.$el);
console.log("created","初始化vue實例已經(jīng)完成矢洲，但還沒有拿到根元素");
},
beforeMount: function(){
// 已經(jīng)拿到根元素刁笙，但是還沒有和vue實例的數(shù)據(jù)結(jié)合
console.log(this.$el);
console.log("beforeMount","vue實例沒有和根元素el掛載");
},
mounted: function() {
console.log(this.$el);
console.log("mounted","vue實例已經(jīng)和根元素el掛載完成");
},
beforeUpdate:function(){
console.log("beforeUpdate","vue實例的數(shù)據(jù)沒有發(fā)生變化蔑匣！");
},
updated: function(){
console.log("updated","vue實例的數(shù)據(jù)發(fā)生變化后會調(diào)用該方法");
},
beforeDestroy: function() {
// 當(dāng)調(diào)用vm.$destroy()方法銷毀vue實例時會執(zhí)行該方法（此時vue實例還存在）
console.log(vm.text);
console.log("beforeDestroy","vue實例銷毀之前會調(diào)用");
},
destroyed: function(){
// vue實例被完全銷毀之后才會執(zhí)行該方法（和根元素解綁了）
vm.text = "vue實例被銷毀了"; // 該數(shù)據(jù)會存在，但是頁面的虛擬DOM不會發(fā)生改變
console.log(vm); // 此時vue實例已經(jīng)和根元素沒有關(guān)系了
console.log("destroyed","vue實例銷毀之后才會調(diào)用");
}
});
</script>
</body>
</html>
