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）.