# 前言

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

---

在這個(gè)系列里我希望能從零開始講解所有關(guān)于 Vue.js 的知識(shí), 并結(jié)合實(shí)戰(zhàn)項(xiàng)目和源碼分析, 來讓讀者可以在最后做到全面的掌握 Vue.js 框架.

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

在講解之前, 首先結(jié)論先行: Vue 是一個(gè)采用 MVVM 架構(gòu), 通過數(shù)據(jù)驅(qū)動(dòng)視圖的形式來構(gòu)建用戶界面的漸進(jìn)式框架.

看不懂沒關(guān)系, 我后面會(huì)一個(gè)詞一個(gè)詞的講解其概念.

讓我們開始吧

---

# "漸進(jìn)式框架" & "自底向上逐層應(yīng)用"

Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。

"漸進(jìn)式" 的意思就是從少到多, 從弱到強(qiáng), Vue 框架并不強(qiáng)制開發(fā)者一下子就使用它的全部.

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

---

# 數(shù)據(jù)驅(qū)動(dòng)視圖

Vue 是數(shù)據(jù)驅(qū)動(dòng)視圖的框架, 采用了 MVVM 架構(gòu). 其核心庫只關(guān)注視圖層, 視圖與數(shù)據(jù)狀態(tài)保持同步.

## 什么是 MVC 架構(gòu)?

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

在 MVC 架構(gòu)下, 軟件可以分成三個(gè)部分:

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

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

• 用戶在 View 上進(jìn)行操作, 觸發(fā)相應(yīng)事件;
• Controller 接到事件, 執(zhí)行相應(yīng)業(yè)務(wù)邏輯, 調(diào)用 Model 的接口修改數(shù)據(jù)狀態(tài);
• Model 中新的數(shù)據(jù)發(fā)送到 View, 視圖更新, 用戶得到反饋;

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

## 什么是 MVVM 架構(gòu)?

在 MVVM 架構(gòu)中, Controller 被替換成了 ViewModel. 它作為 View 與 Model 溝通的橋梁, 負(fù)責(zé)監(jiān)聽 Model 或 View 的修改. 由此實(shí)現(xiàn)了 View 和 Model 的 "雙向綁定". 意思就是說, 當(dāng) Model 層數(shù)據(jù)進(jìn)行修改時(shí), ViewModel 層檢測(cè)到了變化, 然后通知 View 層進(jìn)行相應(yīng)的視圖修改. 反之, 當(dāng) View 層做了修改時(shí), Model 層的數(shù)據(jù)也會(huì)得到相應(yīng)的修改.

## 響應(yīng)式的雙向數(shù)據(jù)綁定

在頁面中, DOM 狀態(tài)其實(shí)就是數(shù)據(jù)狀態(tài)的一種映射. 我們的業(yè)務(wù)邏輯應(yīng)該關(guān)注于對(duì)于數(shù)據(jù)狀態(tài)的操作. 當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候, 框架應(yīng)當(dāng)幫助我們自動(dòng)更新視圖, 而不需要我們?cè)偈謩?dòng)獲取 DOM 元素, 然后再對(duì)它進(jìn)行修改了.

Vue 的核心是一個(gè) "響應(yīng)式的數(shù)據(jù)綁定系統(tǒng)". 數(shù)據(jù)和視圖建立綁定之后, DOM 將與數(shù)據(jù)保持同步. 當(dāng)數(shù)據(jù)被修改了, DOM 便相應(yīng)的更新; 同樣, 用戶在視圖上的操作也會(huì)自動(dòng)更新相關(guān)的數(shù)據(jù). 所有關(guān)于 DOM 的操作都被 Vue 在背后幫我們執(zhí)行了, 我們只需關(guān)注于數(shù)據(jù)就好了. 這種思想也被稱為 "數(shù)據(jù)驅(qū)動(dòng)"

簡(jiǎn)化地表示 "數(shù)據(jù)" 與 "視圖" 的關(guān)系就如下圖:

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

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

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

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

Vue 會(huì)把這些模板編譯成一個(gè)渲染函數(shù)。該函數(shù)被調(diào)用后會(huì)渲染并且返回一個(gè)虛擬的 DOM 樹. 這個(gè) "樹" 的職責(zé)就是描述當(dāng)前視圖應(yīng)處的狀態(tài)。之后再通過一個(gè) Patch 函數(shù)，將這些虛擬 DOM 創(chuàng)建成真實(shí)的 DOM 元素。在這個(gè)過程中, Vue 有一個(gè) "依賴追蹤系統(tǒng)" 會(huì)偵測(cè)在渲染過程中所依賴到的數(shù)據(jù)來源. 當(dāng)數(shù)據(jù)源發(fā)生變動(dòng)時(shí), 就可以根據(jù)需要重新渲染虛擬 DOM 樹。當(dāng)一個(gè)新的虛擬樹被渲染出來之后, Vue 會(huì)將其與老樹進(jìn)行對(duì)比，并最終得出應(yīng)施加到真實(shí) DOM 上的改動(dòng), 然后通過 Patch 函數(shù)施加改動(dòng)。

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

---

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

如果喜歡的話就點(diǎn)個(gè)關(guān)注吧！O(∩_∩)O 謝謝各位的支持??

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。