# 前言

作為還在漫漫前端學習路上的一位自學者。我以學習分享的方式來整理自己對于知識的理解，同時也希望能夠給大家作為一份參考。希望能夠和大家共同進步，如有任何紕漏的話，希望大家多多指正。感謝萬分！

---

在這個系列里我希望能從零開始講解所有關于 Vue.js 的知識, 并結合實戰項目和源碼分析, 來讓讀者可以在最后做到全面的掌握 Vue.js 框架.

在整個系列的第一篇, 我要先講解一下到底什么是 Vue, 我們要學的到底是個什么東西.

在講解之前, 首先結論先行: Vue 是一個采用 MVVM 架構, 通過數據驅動視圖的形式來構建用戶界面的漸進式框架.

看不懂沒關系, 我后面會一個詞一個詞的講解其概念.

讓我們開始吧

---

# "漸進式框架" & "自底向上逐層應用"

Vue 是一套用于構建用戶界面的漸進式框架。Vue 被設計為可以自底向上逐層應用。

"漸進式" 的意思就是從少到多, 從弱到強, Vue 框架并不強制開發者一下子就使用它的全部.

Vue 從設計角度來講，可以分成上圖的這幾大部分，但是開發者并不需要把所有的東西都學會, 或者都用上. "聲明式渲染" 和 "組件系統" 是 Vue 核心庫所包含內容，而 "客戶端路由"、"狀態管理"、"構建工具" 都有其他各自專門的解決方案。這些解決方案相互獨立，Vue 將框架做了分層設計, 你可以在 Vue 核心庫的基礎上靈活地在不同層上使用其他方案, 而不是說一定要用 Vue 提供的.

---

# 數據驅動視圖

Vue 是數據驅動視圖的框架, 采用了 MVVM 架構. 其核心庫只關注視圖層, 視圖與數據狀態保持同步.

## 什么是 MVC 架構?

一個清晰合理的架構是一個復雜程序所必備的. MVVM 是一種軟件的架構模式. 但在講它之前, 要先了解一下 MVC 架構.

在 MVC 架構下, 軟件可以分成三個部分:

• 視圖 (View): 用戶界面
• 控制器 (Controller): 業務邏輯
• 模型 (Model): 數據保存

它們各個部分之間的通信方式如上圖:

• 用戶在 View 上進行操作, 觸發相應事件;
• Controller 接到事件, 執行相應業務邏輯, 調用 Model 的接口修改數據狀態;
• Model 中新的數據發送到 View, 視圖更新, 用戶得到反饋;

當然上述所講為一般而言的 MVC 模式. 在不同的項目中, MVC 的實現方法可能都不盡相同. 比如, 網頁開發中, 某些項目除了允許用戶在頁面上觸發 DOM 事件, 從而讓相關事件處理函數得到執行外. 用戶還可以通過在 URL 后加上不同的 # 錨點來觸發 hashChange 事件, 從而讓相關業務邏輯得到執行.

## 什么是 MVVM 架構?

在 MVVM 架構中, Controller 被替換成了 ViewModel. 它作為 View 與 Model 溝通的橋梁, 負責監聽 Model 或 View 的修改. 由此實現了 View 和 Model 的 "雙向綁定". 意思就是說, 當 Model 層數據進行修改時, ViewModel 層檢測到了變化, 然后通知 View 層進行相應的視圖修改. 反之, 當 View 層做了修改時, Model 層的數據也會得到相應的修改.

## 響應式的雙向數據綁定

在頁面中, DOM 狀態其實就是數據狀態的一種映射. 我們的業務邏輯應該關注于對于數據狀態的操作. 當數據發生改變的時候, 框架應當幫助我們自動更新視圖, 而不需要我們再手動獲取 DOM 元素, 然后再對它進行修改了.

Vue 的核心是一個 "響應式的數據綁定系統". 數據和視圖建立綁定之后, DOM 將與數據保持同步. 當數據被修改了, DOM 便相應的更新; 同樣, 用戶在視圖上的操作也會自動更新相關的數據. 所有關于 DOM 的操作都被 Vue 在背后幫我們執行了, 我們只需關注于數據就好了. 這種思想也被稱為 "數據驅動"

簡化地表示 "數據" 與 "視圖" 的關系就如下圖:

## 聲明式渲染 && 虛擬 DOM

Vue 提供一套基于 HTML 的模板語法, 允許開發者聲明式地將真實 DOM 與 Vue 實例的數據綁定在一起。

首先, "聲明式" 的意思就是: 開發者告訴 Vue 框架想要什么結果, 而如何達成由 Vue 自己去做, 開發者不用管. 例如下面這段模板代碼聲明式地讓 Vue 將 name 的數據和 <p> 標簽綁定在一起:

<p>Hello {{ name }}</p>

Vue 會把這些模板編譯成一個渲染函數。該函數被調用后會渲染并且返回一個虛擬的 DOM 樹. 這個 "樹" 的職責就是描述當前視圖應處的狀態。之后再通過一個 Patch 函數，將這些虛擬 DOM 創建成真實的 DOM 元素。在這個過程中, Vue 有一個 "依賴追蹤系統" 會偵測在渲染過程中所依賴到的數據來源. 當數據源發生變動時, 就可以根據需要重新渲染虛擬 DOM 樹。當一個新的虛擬樹被渲染出來之后, Vue 會將其與老樹進行對比，并最終得出應施加到真實 DOM 上的改動, 然后通過 Patch 函數施加改動。

同時, Vue 也允許用戶直接跳過寫模板這一層去手寫渲染函數. 模板和渲染函數都各有利弊, 首先模板更貼近 HTML，有著良好的可讀性的同時, 可以讓我們更直觀地思考語義結構，更好地結合 CSS 的書寫。而直接寫渲染函數，因為寫的是真正的 JavaScript 代碼，函數內可以進行更復雜的邏輯判斷，可以選擇性地返回最終要返回的 DOM 結構，從而實現一些在模板的語法限制下，很難做到的一些事情。但雖然兩個都是可以選擇的。在絕大部分情況下還是推薦使用模板，只有在需要復雜邏輯的情況下，才使用渲染函數。

---

好啦，今天的分享就告一段落啦。

如果喜歡的話就點個關注吧！O(∩_∩)O 謝謝各位的支持??

總結

以上是生活随笔為你收集整理的patch是什么意思啊_学 Vue 看这个就够了 - 什么是 Vue.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。