資料驅動

資料驅動

在Vuejs中，隻需要改變資料 model，Vuejs 通過 directives 指令 對 dom 進行封裝，當資料發生變化，會通知指令修改對應的dom，通過資料驅動 dom，dom 是資料的一種自然映射。

Vuejs還會對操作進行監聽，當我們修改視圖 View 的時候，Vuejs監聽這些變化，進而改變資料。

這樣形成了資料的雙向綁定。

Vue js 資料響應原理：

以下圖為例，在一個Vue對象執行個體化的過程中，會給 a.b 這份資料，通過 es5 的 defineproperty 添加 getter setter， 通過 vuejs 會對模闆做的編譯，解析生成一個指令對象。每個指令對象都會關聯一個Watcher。

當對指令對應的表達式 a.b 進行求值的時候，就會觸發他的getter。我們就會把依賴收集到 Watcher 裡面。

當我們再次改變 a.b 的時候，就會觸發他的setter，就會通知到對應的 Watcher，然後 Watcher

會對 a.b 進行求值，然後對比新舊值，當發現值改變了，Watcher又會通知到指令，讓指令的

Update方法執行。由于指令是對dom的封裝，是以他會調用原生 Dom 的方法，去更新視圖。

這樣我們就完成了資料改變，到資料更新的全過程。

元件化

vuejs另一個核心思想是元件化，元件化的目的是擴充HTML元素，封裝可重用的代碼。

如下圖所示，左側就是我們的頁面，可以被拆分成一個個小的區塊，每個區塊對應一個元件，元件可以嵌套，最終組合形成一個完整的頁面。

在Vuejs 中，每個元件都對應一個 viewmodel，最終我們生成右邊的 viewmodel 的一個樹，它和我們的 dom 樹是一一對應的關系。

元件設計原則

1. 頁面上每個獨立的可視，可互動的區域視為一個元件，比如頁面的頭部，尾部，還有一些可以複用的區塊，都可以抽象成一個元件。

2. 每個元件對應一個工程目錄，元件所需要的各種資源在這個目錄下就近維護。就近維護原則，其實就展現了前端工程化思想，為前端開發提供了很好的分治政策，每個開發者都将很清楚的知道自己開發維護的功能單元，他的代碼必然存在于對應的元件目錄中。在那個目錄下就可以找到功能單元内部所有的業務邏輯，無論樣式、js、還是頁面結構，都在這裡。在vuejs

中可以通過 .vue 檔案把元件依賴的模闆、js和樣式都寫在一個檔案中，可以說把元件化的就近維護原則發揮到了極緻。

3. 頁面不過是元件的容器，元件可以嵌套自由組合形成完整的頁面。開發過程中，會将頁面拆分成一個個元件，進行開發維護。

來自為知筆記(Wiz)