組件從創建到銷燬的一系列過程叫做組件的聲明週期。
vue在整個生命週期裏面提供了一些函數，可以在內部實現一些業務邏輯，並且這些函數會在一些特定的場合下去執行。（在生命週期的某一個時刻進行觸發）。
組件的生命週期鉤子函數大致可以分爲三個階段：初始化 、進行中 、 銷燬。
1、初始化：beforecreate – create – beforeMount - mounted
// 一個組件或者實例的生命週期都是通過new開始的
// 實例化之後，內部會做一些初始化事件與生命週期相關的配置
Vue.component("my-component",{
template:"#my-component",
data(){
return {
msg:1
}
},
// 這個鉤子函數初始化的時候立馬執行,此鉤子函數裏面是獲取不到數據的
// 同時頁面中的真實dom節點也沒有掛載出來，null
beforeCreate(){
console.log("beforeCreate....")
console.log(this.msg,document.getElementById("title")) // undefined null
},
// created鉤子函數內部的數據已經被掛載了，但是真實dom節點還是沒有渲染出來
// 在這個鉤子函數裏面，如果同步的去更改數據的話，運行中鉤子函數是不會執行的。
// 通常會在此鉤子函數裏面進入ajax的異步操作，另外還可以做一些初始化事件的綁定
created(){
console.log("created...")
console.log(this.msg,document.getElementById("title")) // undefined null
},
// 接下來的過程，就是組件或者實例去查找各自的模板，讓後將其編譯成虛擬dom，即將放入render函數中做初始化渲染的操作。
// beforeMount代表dom馬上就要被渲染出來了，但是還沒有真正的在頁面中渲染出來
// 此鉤子函數與created鉤子函數基本一致，可以做ajax與初始化事件的綁定操作
beforeMount(){
console.log("beforeMount....")
console.log(this.msg,document.getElementById("title")) // 1 null
},
// 生成好了虛擬dom，然後在render函數裏面替換對應的el，渲染成真實dom節點
// 相當於在render函數裏面做了一個初始化渲染的操作
// 相當於把組件內部的render函數覆蓋了。自己的render是將虛擬dom渲染成真實dom的操作
render(){ // 內部執行不需要寫這一步
console.log("render.....")
},
// mounted鉤子函數是初始化階段的最後一個鉤子函數
// 數據已經掛載完畢了，真實的dom也已經渲染出來了
// 這個鉤子函數可以用來做一些實例化的相關操作 ===> 拖拽
mounted(){
console.log("mounted.....")
console.log(this.msg,document.getElementById("title")) // 1 dom真實節點
},
})
// 綁定摸板組件
new Vue({}).$mount("#app");
2、進行中階段：beforeUpdate - updated
// 一個組件或者實例的生命週期都是通過new開始的
// 實例化之後，內部會做一些初始化事件與生命週期相關的配置
Vue.component("my-component",{
template:"#my-component",
data(){
return {
msg:1
}
},
// 運行時鉤子函數初始化階段是不會主動執行的
// 只有dom掛載完畢了，然後再去當數據發生變化的時候，beforeUpdate這個鉤子函數纔會執行
beforeUpdate(){
console.log("beforeUpdate....")
},
// 這個鉤子函數是可行的
// 當數據發生改變的時候，引發虛擬dom的對比，虛擬dom對比完成後，再去渲染真實的dom結構
// 當真實的dom結構渲染完成後，內部纔會執行updated鉤子函數
// 數據改變了，然後swiper-slide這幾個真實dom生成好了之後，纔會進入到updated這個鉤子函數裏面去
updated(){
new Swiper(".swiper-container",{
loop:true
})
},
})
// 綁定摸板組件
new Vue({}).$mount("#app");
3、銷 毀：beforeDestroy - destroyed
// 一個組件或者實例的生命週期都是通過new開始的
// 實例化之後，內部會做一些初始化事件與生命週期相關的配置
Vue.component("my-component",{
template:"#my-component",
data(){
return {
msg:1
}
},
// 當組件銷燬時，就會觸發，vm.$destroy()的時候，組件就會被銷燬
// 這個鉤子函數代表銷燬之前，可以做一些善後操作
// 例如可以做一些清除事件綁定，清除計時器綁定
beforeDestroy(){
clearInterval(this.timer) // 清除計時器
console.log("beforeDestroy...")
},
// 組件一旦被銷燬了，組件的dom結構還是存在的
// 只是組件的雙向綁定
destroyed(){
console.log("destroyed...")
}
})
// 綁定摸板組件
new Vue({}).$mount("#app");
注 意：生命週期函數內不能使用箭頭函數。