Vue裏組件的通信

通信：傳參、控制、數據共享（A操控B做一個事件）

模式：父子組件間、非父子組件

1. 父組件可以將一條數據傳遞給子組件，這條數據可以是動態的，父組件的數據更改的時候，子組件接收的也會變化

   子組件被動的接收父組件的數據,子組件不要再更改這條數據了

2. 父組件如果將一個引用類型的動態數據傳遞給子組價的時候，數據會變成雙向控制的，子組件改數據的時候父組件也能接收到數據變化,因為子組件改的時候不是在改數據，而是在改數據裏的內容，也就是說引用類型數據的地址始終沒有變化，不算改父組件數據

   父子間數據共享（雙向控制）

3. 父組件可以將一個方法傳遞給子組件，子組件調用這個方法的時候，就可以給父組件傳遞數據

   父組件被動的接收子組件的數據

4. 父組件可以將一個事件綁定在子組件的身上，這個事件的處理程序是父組件某一個方法，當子組件觸發自己的這個被綁定的事件的時候，相當於觸發了父組件的方法

   父組件被動的接收子組件的數據

5. 在組件間可以用過ref形成ref鏈，組件還擁有一個關系鏈（$parent,$children,$root）,通過這兩種鏈；理論來說，任意的兩個組件都可以互相訪問，互相進行通信

   任意組件通信，用的少...

6. event bus 事件總線 專註於非父子組件的通信，其實父子組件也可以使用，只是沒有必要

   在B組件的某個鉤子函數為event_bus綁定一個事件，事件的處理程序是B想做的事情

   在A組件的某一個操作裏，觸發event_bus綁定的事件

7. 大量組件間數據共享的時候 vuex

組件的生命周期

每一個組件或者實例都會經歷一個完整的生命周期，總共分為三個階段：初始化、運行中、銷毀

生命周期圖示

1. 實例、組件通過new Vue() 創建出來之後會初始化事件和生命周期，然後就會執行beforeCreate鉤子函數，這個時候，數據還沒有掛載，只是一個空殼，無法訪問到數據和真實的dom，一般不做操作

2. 掛載數據，綁定事件等等，然後執行created函數，這個時候已經可以使用到數據，也可以更改數據,在這裏更改數據不會觸發updated函數，這裏是渲染前倒數第二次更改數據的機會，不會觸發其他的鉤子函數，一般可以在這裏做初始數據的獲取

3. 接下來開始找實例或者組件對應的模板，編譯模板為虛擬dom放入到render函數中準備渲染，然後執行beforeMount鉤子函數，在這個函數中虛擬dom已經創建完成，馬上就要渲染,在這裏也可以更改數據，不會觸發updated，這裏是渲染前最後一次更改數據的機會，不會觸發其他的鉤子函數，一般可以在這裏做初始數據的獲取

4. 接下來開始render，渲染出真實dom，然後執行mounted鉤子函數，此時，組件已經出現在頁面中，數據、真實dom都已經處理好了,事件都已經掛載好了，可以在這裏操作真實dom等事情...

5. 當組件或實例的數據更改之後，會立即執行beforeUpdate，然後vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之後重新渲染，一般不做什麽事兒

6. 當更新完成後，執行updated，數據已經更改完成，dom也重新render完成，可以操作更新後的虛擬dom

7. 當經過某種途徑調用$destroy方法後，立即執行beforeDestroy，一般在這裏做一些善後工作，例如清除計時器、清除非指令綁定的事件等等

8. 組件的數據綁定、監聽...去掉後只剩下dom空殼，這個時候，執行destroyed，在這裏做善後工作也可以

vue的組件和生命周期