原文鏈接：https://blog.csdn.net/weixin_45127981/article/details/90699150
Vue核心思想：數據驅動、組件化
一、數據驅動
傳統的前端數據交互是用Ajax從服務端獲取數據，然后操作DOM來改變視圖；或者前端交互要改變數據時，又要再來一次上述步驟，而手動操作DOM是一個繁瑣的過程且易出錯。
Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專注於View 層。它讓開發者省去了操作DOM的過程，只需要改變數據。Vue會通過Dircetives指令，對DOM做一層封裝，當數據發生改變會通知指令去修改對應的DOM，數據驅動DOM變化，DOM是數據的一種自然映射。
Vue還會對操作進行監聽，當視圖發生改變時，vue監聽到這些變化，從而改變數據，這樣就形成了數據的雙向綁定。
Vue是一種MVVM框架。而DOM是數據的一個種自然映射。傳統的模式是通過Ajax請求從model請求數據，然后手動的觸發DOM傳入數據修改頁面。Vue中，Directives對view進行了封裝，當model里的數據發生變化是，Vue就會通過Directives指令去修改DOM。同時也通過DOM Listener實現對視圖view的監聽，當DOM改變時，就會被監聽到，實現model的改變，實現數據的雙向綁定。
二、組件響應原理
數據（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重新計算，從而致使它關聯的組件得以更新。
三、組件化
組件化實現了擴展HTML元素，封裝可重用的代碼。每一個組件都對應一個ViewModel。頁面上每個獨立的可視/可交互區域都可以視為一個組件。每個組件對應一個工程目錄，組件所需要的各種資源在這個目錄下就進維護。頁面是組件的容器，組件可以嵌套自由組合形成完整的頁面。