vue.js的兩大核心:1. 數據驅動 ------------- 2.組件系統
1. 數據驅動,也就是數據的雙向綁定
數據發生變化后,會重新對頁面渲染,這就是Vue響應式,那么這一切是怎么做到的呢?
想完成這個過程,我們需要:
- 偵測數據的變化
- 收集視圖依賴了哪些數據
- 數據變化時,自動“通知”需要更新的視圖部分,並進行更新
對應專業俗語分別是:
- 數據劫持 / 數據代理
- 依賴收集
- 發布訂閱模式
也就是說:Vue 響應式核心就是,getter 的時候會收集依賴,setter 的時候會觸發依賴更新
vue將遍歷data中對象的所有property,並使用 Object.defineProperty
把這些 property 全部轉為 getter/setter。
這些 getter/setter 對用戶來說是不可見的,但是在內部它們讓 Vue 能夠追蹤依賴,在 property 被訪問和修改時通知變更。
每個組件實例都對應一個 watcher 實例,它會在組件渲染的過程中把“接觸”過的數據 property 記錄為依賴。
getter 的時候我們會收集依賴,依賴收集就是訂閱數據變化watcher的收集,依賴收集的目的是當響應式數據發生變化時,能夠通知相應的訂閱者去處理相關的邏輯。
setter 的時候會觸發依賴更新,之后當依賴項的 setter 觸發時,會通知 watcher,從而使它關聯的組件重新渲染。
總結:
1)原理:
當創建 Vue 實例時,vue 會遍歷 data 選項的屬性,利用 Object.defineProperty 為屬性添加 getter 和 setter 對數據的讀取進行劫持(getter 用來依賴收集,setter 用來派發更新),並且在內部追蹤依賴,在屬性被訪問和修改時通知變化。
每個組件實例會有相應的 watcher 實例,會在組件渲染的過程中記錄依賴的所有數據屬性(進行依賴收集,還有 computed watcher,user watcher 實例),之后依賴項被改動時,setter 方法會通知依賴與此 data 的 watcher 實例重新計算(派發更新),
從而使它關聯的組件重新渲染。
2)實現過程:
我們已經知道實現數據的雙向綁定,首先要對數據進行劫持監聽,所以我們需要設置一個監聽器Observer,用來監聽所有屬性。如果屬性發上變化了,就需要告訴訂閱者Watcher看是否需要更新。
因為訂閱者是有很多個,所以我們需要有一個消息訂閱器Dep來專門收集這些訂閱者,然后在監聽器Observer和訂閱者Watcher之間進行統一管理的。接着,我們還需要有一個指令解析器Compile,對每個節點元素進行掃描和解析,
將相關指令對應初始化成一個訂閱者Watcher,並替換模板數據或者綁定相應的函數,此時當訂閱者Watcher接收到相應屬性的變化,就會執行對應的更新函數,從而更新視圖。因此接下去我們執行以下3個步驟,實現數據的雙向綁定:
1.實現一個監聽器Observer,用來劫持並監聽所有屬性,如果有變動的,就通知訂閱者。
2.實現一個訂閱者Watcher,可以收到屬性的變化通知並執行相應的函數,從而更新視圖。
3.實現一個解析器Compile,可以掃描和解析每個節點的相關指令,並根據初始化模板數據以及初始化相應的訂閱器
注:Proxy
是 JavaScript 2015 的一個新特性。Proxy
的代理是針對整個對象的,而不是對象的某個屬性,因此不同於 Object.defineProperty
的必須遍歷對象每個屬性,Proxy
只需要做一層代理就可以監聽同級結構下的所有屬性變化,當然對於深層結構,遞歸還是需要進行的。此外Proxy
支持代理數組的變化。Proxy
就是vue3.0使用的方法
2. 組件系統
認識:
1)能夠把頁面抽象成多個相對獨立的模塊;
2)實現代碼重用,提高開發效率和代碼質量,便於代碼維護
組件的核心選項
1 模板(template):模板聲明了數據和最終展現給用戶的DOM之間的映射關系。
2 初始數據(data):一個組件的初始數據狀態。對於可復用的組件來說,這通常是私有的狀態。
3 接受的外部參數(props):組件之間通過參數來進行數據的傳遞和共享。
4 方法(methods):對數據的改動操作一般都在組件的方法內進行。
5 生命周期鈎子函數(lifecycle hooks):一個組件會觸發多個生命周期鈎子函數,最新2.0版本對於生命周期函數名稱改動很大。
6 私有資源(assets):Vue.js當中將用戶自定義的指令、過濾器、組件等統稱為資源。一個組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調用。