Vue核心思想是什么

這篇文章給大家分享的是有關Vue核心思想是什么的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

Vue核心思想：數據驅動、組件化

1、數據驅動

傳統的前端數據交互是用 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 的改變，實現數據的雙向綁定。

2、組件響應原理數據（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 重新計算，從而致使它關聯的組件得以更新。

3、組件化

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

組件化實現了擴展 HTML 元素，封裝可用的代碼。頁面上每個獨立的可視/可交互區域視為一個組件；每個組件對應一個工程目錄，組件所需要的各種資源在這個目錄下就近維護；頁面不過是組件的容器，組件可以嵌套自由組合形成完整的頁面。

感謝各位的閱讀！關于“Vue核心思想是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！