生命周期 鈎子函數
一個組件從創建到銷毀的過程就是生周期
beforeCreate:創建前
1、當前vue實例化的時候會做一個初始化的操作，在這個生命周期函數里面我們可以做初始化的loading
2、在當前函數里面是訪問不到data中的屬性，但是可以通過vue的實例對象進行訪問
created:創建后
1、當beforeCreate執行完畢以后，會執行created. 在當前函數中我們可以訪問到data中的屬性
2、當前生命周期函數執行的時候會將data中所以的屬性和methods身上所以的方法添加到vue的實例身上，同時
會將data中所有的屬性添加一個getter/setter方法
3、如果需要進行前后端上數據交互(ajax請求的時候) 需要在當前生命周期中使用
beforeMount:掛載前
(渲染)
render函數初次被調用---->數據和模板沒有進行相結合，同時還沒有渲染到html頁面上
渲染前data中數據最后的修改
mounted:掛載后
1、數據和模板進行相結合，渲染成真實的DOM結構
2、在當前生命周期函數里面我們可以訪問到真實的DOM結構,
3、在vue中我們可以通過$refs來訪問到真實的DOM結構
4、ref類似與id一樣 值必須是唯一的 訪問的時候我們可以通過this.$refs.屬性
beforeDestroy:銷毀前
銷毀之前還可以訪問到DOM結構 以及相關的數據(data)
在這個生命周期函數中我們可以將綁定的事件進行移除
destroyed:銷毀后
在這個生命周期函數中會將數據和模板之間的關系斷開(不是你的做的)
在這個生命周期函數中我們還是可以訪問到data中的屬性
但是訪問不到真實的DOM結構了
beforeUpdate:更新前
只要data中的屬性發生了改變，那么這個生命周期就會執行，render函數再次會執行
在這個生命周期函數中我們可以對數據進行最后的修改，同時也可以訪問到最新的DOM結構和數據
updated:更新后
在當前生命周期函數中我們可以訪問到最新的DOM結構(數據更新后最新的DOM結構)和數據
let eventList = {};
const $on=(eventName,cb)=>{
if(!eventList[eventName]){
eventList[eventName] = [];
}
eventList[eventName].push(cb)
}
const $emit = (eventName,params)=>{
if(eventList[eventName]){
let arr = eventList[eventName];
arr.map((cb)=>{
cb(params)
})
}
}
const $off = (eventName,cb)=>{
if(eventList[eventName]){
if(cb){
let index = eventList[eventName].indexOf(cb);
eventList[eventName].splice(index,1);
}else{
eventList[eventName].length = 0;
}
}
}