Vue核心思想：資料驅動、元件化

blacker2018發表於2018-07-02
Vue元件化

1.資料驅動

DOM是資料的一種自然對映。

傳統的前端資料互動是用Ajax從服務端獲取資料，然後操作DOM來改變檢視；或者前端互動要改變資料時，又要再來一次上述步驟，而手動操作DOM是一個繁瑣的過程且易出錯。

Vue.js 是一個提供了 MVVM 風格的雙向資料繫結的 Javascript 庫，專注於View 層。它讓開發者省去了操作DOM的過程，只需要改變資料。Vue會通過Dircetives指令，對DOM做一層封裝，當資料發生改變會通知指令去修改對應的DOM，資料驅動DOM變化，DOM是資料的一種自然對映。 Vue還會對操作進行監聽，當檢視發生改變時，vue監聽到這些變化，從而改變資料，這樣就形成了資料的雙向繫結。

MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向資料繫結，這使得ViewModel 的狀態改變可以自動傳遞給 View，即所謂的資料雙向繫結。

資料響應原理

資料（model）改變驅動檢視（view）自動更新。

資料響應原理

當你把一個普通的 JavaScript 物件傳給 Vue 例項的 data選項，Vue 將遍歷此物件所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什麼 Vue 不支援 IE8 以及更低版本瀏覽器的原因。 使用者看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這裡需要注意的問題是瀏覽器控制檯在列印資料物件時 getter/setter 的格式化並不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查介面。 每個元件例項都有相應的 watcher 例項物件，它會在元件渲染的過程中把屬性記錄為依賴，之後當依賴項的setter被呼叫時，會通知watcher重新計算，從而致使它關聯的元件得以更新。

2.元件化

擴充套件HTML元素，封裝可重用的程式碼。每一個元件都對應一個ViewModel。頁面上每個獨立的可視/可互動區域都可以視為一個元件。每個元件對應一個工程目錄，元件所需要的各種資源在這個目錄下就進維護。頁面是元件的容器，元件可以巢狀自由組合形成完整的頁面。

Tips

在JavaScript的世界裡,有兩個詞經常被提到,shim和polyfill.它們指的都是什麼,又有什麼區別?

shim

shim是一個庫,它將一個新的API引入到一箇舊的環境中,而且僅靠舊環境中已有的手段實現。

polyfill

polyfill就是一個用在瀏覽器API上的shim.我們通常的做法是先檢查當前瀏覽器是否支援某個API,如果不支援的話就載入對應的polyfill.然後新舊瀏覽器就都可以使用這個API了.

術語polyfill來自於一個裝潢產品Polyfilla:Polyfilla是一個英國產品,在美國稱之為Spackling Paste(譯者注:刮牆的,在中國稱為膩子).記住這一點就行:把舊的瀏覽器想象成為一面有了裂縫的牆.這些polyfills會幫助我們把這面牆的裂縫抹平,還我們一個更好的光滑的牆壁(瀏覽器)Paul Irish釋出過一個Polyfills的總結頁面“HTML5 Cross Browser Polyfills”.es5-shim是一個shim（而不是polyfill)的例子,它在ECMAScript 3的引擎上實現了ECMAScript 5的新特性,而且在Node.js上和在瀏覽器上有完全相同的表現(譯者注:因為它能在Node.js上使用,不光瀏覽器上,所以它不是polyfill）.

相關文章