Vue2知識點簡要

一、雙向系結原理

　　Vue2采用的是觀察者-發布訂閱模式，利用Object.defineProperty實作對資料已定義屬性的監控(定義觀察者模式)，

　　編譯DOM時決議v-model等屬性以及對input框等注冊事件實作UI和JS的互動(也就是注冊發布訂閱這模式)；

　　詳細的是主要是定義一個Observe類實作物件的監控，通過Compile方法來決議DOM中的指令和替換DOM，每當遇到一個v-、{{}}等屬性

　　則生成一個Watcher，同時將Watcher添加到Dep中，當有屬性變化時則輪循Dep中所有的Watcher進行UI更新等操作

二、框架的優缺點

　　優點：1. 輕量級、提供了回應式編程概念，組件化思想

　　　　　2. 采用虛擬DOM，渲染效率高

　　　　　3. 生態完整

　　缺點：1. 由于頁面內容都是基于JS，所以SEO方面不是很友好

三、虛擬DOM和Diff演算法

　　虛擬DOM：web專案中比較消耗性能的就包含DOM的重排、重繪以及不斷的讀取DOM，但是JS的計算性能要比DOM的好很多，所以基于這個原因，Vue通過

　　　　　　　 生成虛擬DOM，記錄DOM節點名稱、型別、屬性以及事件等各種屬性，當資料有變化時，通過DIF演算法對比新舊虛擬DOM，以最小的性能代價找到DOM變化點，

　　　　　　　 然后只更新變化的DOM即可，

　　Diff演算法簡述：1. 為了提升性能，Diff演算法對比節點是只對比同一級節點，不做跨級對比

　　　　　　　　  2. 對比節點，如果節點型別不同，則替換節點、型別相同則替換屬性或者文本、節點不存在則洗掉、節點新增則增加

　　　　　　　　  3. 如果存在子節點，設定頭尾指標，從節點兩端同時進行對比，同時移動指標下標值，如果endIndex>startIndex則終止回圈

 四、生命周期及其作用

　　1. beforeCreate: 初始化Vue實體，同時初始化周期事件，但是并沒有決議出$el以及沒有系結data

　　2. created: 此時資料已經系結，未決議出$el，但是$data已經系結到vue中，這之后,beforeMount之前會判斷是否含有el元素，

　　　　　　　 沒有則生命周期結束(當執行$mount(el)時，繼續后續功能，因為此時已有$el)，如果有則繼續判斷是否有template，

　　　　　　　 有temp,則編譯生成render函式，否則編譯outerHtml，如果要在created階段中進行dom操作，就要將操作都放在 Vue.nextTick() 的回呼函式中

　　3. beforeMount: 完成data和el資料初始化，但是頁面中還是用vue占位符

　　4. mounted: 載入后html已經渲染(ajax請求可以放在這個函式中)，把vue實體中的data里的message掛載到BOM節點中去

　　5. beforeUpdate: 重新渲染之前觸發，然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff演算法進行對比之后重新渲染

　　6. updated: 資料更新完成，dom也重新render完成

　　7. beforeDestory: 銷毀前執行（$destroy方法被呼叫的時候就會執行）,一般在這里善后:清除計時器、清除非指令系結的事件等等…’)

　　8. destoryed: 銷毀后 （Dom元素存在，只是不再受vue控制）,卸載watcher、事件監聽、子組件等

五、組件間通信方式

　　1. 父傳子：采用v-model與props的方式進行通信，但是是單向的，子組件該值的改變并不會影響父組件；還可以采用Vuex

　　2. 子傳父：采用@emit事件由子組件向父組件冒泡資料或者采用$on的方式呼叫子組件的方式回呼傳遞資料，同樣也是單向的；還可以采用Vuex

　　3. 兄弟組件：創建eventBus事件總線通訊，簡單方便不受兄弟組件的層級關系限制；子1上報給父，父下發給子2，資料傳遞邏輯較亂，不能適用于多層級的兄弟關系；還可以采用Vuex

　　4. 父子組件的值同步修改：父組件中系結v-model:example，子組件設定emits: ['update:example'], 當子修改后，采用$emit('update:example')就可以將父組件的值同步改變

六、Vuex的使用

　　組件之間經常會有資料之間相互通信，但是多層嵌套傳值復雜度就會增加，因此vuex就是把常用的變數抽取出來組成一個全域單例模式進行管理，
　　將共享的資料放到vuex,任何組件都可以使用，一旦資料修改，所有參考資料的組件的值都會同步修改，通過commit('***')進行修改，通過mapState把全域的state和getters映射到組件中，

　　總共有五個屬性：

　　state: 存放一些狀態(簡單說就是變數)，狀態被修改后，所有參考的地方都會修改

　　getters: 有時候需要從state中派生出一些狀態，比如對狀態根據某個條件進行過濾

　　mutations：定義如何修改state中的狀態，更新state值的唯一方法就是提交mutation,比如：store.commit('****')

　　action：專門用來解決mutations只有同步無異步的問題，使用commit賦值

　　modules：專案特別復雜的時候，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理

七、路由的使用

　　1. 全域路由：beforeEach、afterEach方法當導航觸發時會被順序執行，可以進行添加token以及做跳轉攔截等

　　2. 單個路由：beforeEnter

　　3. 組件間路由：beforeRouteEnter beforeRouteUpdate  beforeRouteLeave

八、需要注意的知識點

　　1. v-model和v-bind的差別：

　　　　v-bind是單向系結或者叫屬性系結，支持修改屬性值，可簡寫為:attr
　　　　v-model是雙向系結，可用在輸入標簽中
　　　　v-bind和v-model同時使用時 model優先級更高

　　2. 為什么陣列的值變化了不能同步更新到UI：

　　　　Vue2對資料的監聽主要是通過defineProperty方法實作的，通過試驗可以得知該方法可以監控已有屬性的變化，但是Vue2依舊沒有實作這個能力

　　　　原因主要是考慮到性能問題：一個物件的屬性個數一般是有限的，所以對屬性進行監控消耗性能不大，但是陣列可能會有成千上萬，

　　　　對每個屬性監控性能消耗太大，付出和用戶體驗不成正比，故而沒有實作

　　3. computed和watch的使用和區別：　　

　　　　都是以vue的依賴追蹤機制為基礎，都是為了當某一個資料發生變化時，所有依賴這個資料的資料發生變化
　　　　watch： 一個資料影響多個資料
　　　　computed：一個資料受多個資料影響，支持set、get方法(默認是get)，有快取效果

標籤：其他

上一篇：基于 prefetch 的 H5 離線包方案

下一篇：返回列表