Vue里組件的通信
通信:傳參、控制、數據共享(A操控B做一個事件)
模式:父子組件間、非父子組件
-
父組件可以將一條數據傳遞給子組件,這條數據可以是動態的,父組件的數據更改的時候,子組件接收的也會變化
子組件被動的接收父組件的數據,子組件不要再更改這條數據了
-
父組件如果將一個引用類型的動態數據傳遞給子組價的時候,數據會變成雙向控制的,子組件改數據的時候父組件也能接收到數據變化,因為子組件改的時候不是在改數據,而是在改數據里的內容,也就是說引用類型數據的地址始終沒有變化,不算改父組件數據
父子間數據共享(雙向控制)
-
父組件可以將一個方法傳遞給子組件,子組件調用這個方法的時候,就可以給父組件傳遞數據
父組件被動的接收子組件的數據
-
父組件可以將一個事件綁定在子組件的身上,這個事件的處理程序是父組件某一個方法,當子組件觸發自己的這個被綁定的事件的時候,相當於觸發了父組件的方法
父組件被動的接收子組件的數據
-
在組件間可以用過ref形成ref鏈,組件還擁有一個關系鏈($parent,$children,$root),通過這兩種鏈;理論來說,任意的兩個組件都可以互相訪問,互相進行通信
任意組件通信,用的少...
-
event bus 事件總線 專注於非父子組件的通信,其實父子組件也可以使用,只是沒有必要
在B組件的某個鈎子函數為event_bus綁定一個事件,事件的處理程序是B想做的事情
在A組件的某一個操作里,觸發event_bus綁定的事件
-
大量組件間數據共享的時候 vuex
組件的生命周期
每一個組件或者實例都會經歷一個完整的生命周期,總共分為三個階段:初始化、運行中、銷毀
-
實例、組件通過new Vue() 創建出來之后會初始化事件和生命周期,然后就會執行beforeCreate鈎子函數,這個時候,數據還沒有掛載,只是一個空殼,無法訪問到數據和真實的dom,一般不做操作
-
掛載數據,綁定事件等等,然后執行created函數,這個時候已經可以使用到數據,也可以更改數據,在這里更改數據不會觸發updated函數,這里是渲染前倒數第二次更改數據的機會,不會觸發其他的鈎子函數,一般可以在這里做初始數據的獲取
-
接下來開始找實例或者組件對應的模板,編譯模板為虛擬dom放入到render函數中准備渲染,然后執行beforeMount鈎子函數,在這個函數中虛擬dom已經創建完成,馬上就要渲染,在這里也可以更改數據,不會觸發updated,這里是渲染前最后一次更改數據的機會,不會觸發其他的鈎子函數,一般可以在這里做初始數據的獲取
-
接下來開始render,渲染出真實dom,然后執行mounted鈎子函數,此時,組件已經出現在頁面中,數據、真實dom都已經處理好了,事件都已經掛載好了,可以在這里操作真實dom等事情...
-
當組件或實例的數據更改之后,會立即執行beforeUpdate,然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染,一般不做什么事兒
-
當更新完成后,執行updated,數據已經更改完成,dom也重新render完成,可以操作更新后的虛擬dom
-
當經過某種途徑調用$destroy方法后,立即執行beforeDestroy,一般在這里做一些善后工作,例如清除計時器、清除非指令綁定的事件等等
-
組件的數據綁定、監聽...去掉后只剩下dom空殼,這個時候,執行destroyed,在這里做善后工作也可以