生命周期-->生命周期鈎子函數：一個組件從創建到銷毀的一個過程就是生命周期
beforeCreate：創建前
1、組件創建會執行的一個生命周期函數，我們可以在當前生命周期中創建一個loading.當頁面加載完成的時候講loading移除
2、在當前生命周期函數中是訪問不到其他生命周期函數以及data身上的屬性
created:創建后(重)
1、當create生命周期函數執行的時候，會將data以及methods身上所有的屬性和方法添加到vm的實例身上
2、created執行的時候會遍歷data身上所有的屬性，給這些屬性添加一個getter/setter方法
3、我們可以在當前生命周期函數中進行前后端數據的請求(發起ajax)
beforeMount 掛載前
1、當前生命周期函數可以對data中的數據做最后的修改
2、如果在當前生命周期函數中添加的屬性是沒有getter和setter方法的。如果需要擁有的情況則用$set
3、當前生命周期函數中是模板和數據還未進行結合
mounted: 掛載后(重)
1、當前生命周期函數是數據和模板進行相結合，生成了真正的DOM結構
2、在當前生命周期函數重我們可以訪問到真實的DOM結構
3、我們可以在當期生命周期函數中做一些插件的實例化(Swiper better-scroll echarts....)
ref：
定義: ref="名稱"(名稱必須是當前組件中獨一無二的)
獲取: this.$refs.名稱
beforeDestroy: 銷毀前(重)
1、在當前生命周期函數中我們依舊是可以訪問到真實的DOM結構，因此我們可以在當前生命周期函數中做
事件的解綁,以及監聽的移除等操作
destroyed:銷毀后
1、當前生命周期函數執行的時候會將vm與模板之間的關聯進行斷開
2、在當前生命周期函數中我們無法通過ref來訪問到真實的DOM結構了
beforeUpdate:更新前 (多次執行)
1、當數據更新前會執行的生命周期函數
2、當前生命周期是更新的數據還未和模板進行相結合，因此我們可以在當期生命周期函數中做更新數據的最后修改
updated:更新后 (多次執行)
1、當前函數是更新的數據和模板進行了相結合。
2、我們可以在當前生命周期函數中獲取到數據更新后最新的DOM結構
3、我們一般情況下會在這里做插件的實例化，但是需要條件的判斷。如果不加判斷的情況下會非常耗費性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 ref="h2" id="box">{{msg}}</h2>
<h2>{{obj.age}}</h2>
<button @click="handleUpdate">數據更新</button>
</div>
<button onclick="handleDestroy()">銷毀</button>
</body>
</html>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
beforeCreate(){
console.log("beforeCreate----");
console.log(this.msg)
console.log(this)
},
created(){
console.log("created-----")
},
data:{
msg:"1905",
obj:{}
},
methods:{
handleUpdate(){
this.msg = "1902";
// console.log(this.msg);
// console.log(1);
this.$nextTick(()=>{
console.log(document.getElementById("box").innerText);
})
}
},
beforeMount(){
console.log("beforeMount----");
// this.msg = "1902";
// this.age = 20;
this.$set(this.obj,"age",20)
console.log(document.getElementById("app").innerHTML)
},
mounted(){
console.log("mounted----")
console.log(document.getElementById("app").innerHTML)
console.log(this.$refs.h2);
},
beforeUpdate(){
console.log("beforeUpdate ---")
console.log(document.getElementById("app").innerHTML)
this.msg = "不讓你變成1902";
},
updated(){
console.log("updated ---")
// if(!this.swiper){
// this.swiper = new Swiper();
// }
},
beforeDestroy(){
console.log("beforeDestroy----")
console.log(document.getElementById("app").innerHTML)
console.log(this.$refs.h2);
},
destroyed(){
console.log("destroyed")
console.log(document.getElementById("app").innerHTML)
console.log(this.$refs.h2);
}
})
function handleDestroy() {
vm.$destroy();
}
/*
$nextTick()：獲取數據更新后最新的DOM結構
面試題：
nextTicke是同步的還是異步的?
同步的 而nextTick中的函數是 異步的
我可以在當前函數中獲取到數據更新后最新的DOM結構
如何獲取到數據更新后最新的DOM結構
1、nextTick (底層原理類似一個setTimeout 時間為20ms)
2、wacth
3、updated
*/
</script>