2955
作者：李嘉玉，單位：中移物聯(lián)網(wǎng)有限公司
Vue.js是一款適用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。它由尤雨溪在2014年推出，并迅速成為最流行的前端框架之一。Vue.js的設(shè)計(jì)目標(biāo)是通過簡(jiǎn)單、靈活的API，提供一種高效、可復(fù)用和響應(yīng)式的方式來(lái)構(gòu)建現(xiàn)代化的Web應(yīng)用程序。自Vue發(fā)行以來(lái)，就受到了國(guó)內(nèi)外爆發(fā)式的關(guān)注，如今已經(jīng)成為了最流行的前端框架之一，并且其已經(jīng)具有了龐大的生態(tài)系統(tǒng)。Vue框架采用了MVVM的設(shè)計(jì)模式，本文簡(jiǎn)單介紹Vue2中MVVM的實(shí)現(xiàn)。
Vue.js作為一款流行的前端框架，其整體框架的設(shè)計(jì)采用了前端框架中常用的MVVM設(shè)計(jì)模式，將視圖與數(shù)據(jù)相互解耦，分離了關(guān)注點(diǎn)并支持雙向數(shù)據(jù)綁定，使得頁(yè)面的變化呈響應(yīng)式，能夠根據(jù)數(shù)據(jù)的變化而自動(dòng)更新視圖。而Vue對(duì)MVVM模型的實(shí)現(xiàn)離不開數(shù)據(jù)的雙向綁定以及虛擬DOM的頁(yè)面渲染機(jī)制。本文接下來(lái)將從Vue的MVVM模型、數(shù)據(jù)雙向綁定的實(shí)現(xiàn)以及虛擬DOM機(jī)制分別展開介紹。
1、MVVM模型
MVVM即Model-View-ViewModel，是前端三大MV*（MVC、MVP、MVVM）模型之一，是 MVC 模型的改進(jìn)版本。MVVM模型通過數(shù)據(jù)雙向綁定的方式來(lái)解耦視圖和模型，有助于從概念層面上將圖形用戶界面的開發(fā)與業(yè)務(wù)邏輯或后端邏輯的開發(fā)分離開來(lái)，從而使視圖不依賴于任何特定的模型平臺(tái)，其優(yōu)勢(shì)在于明確地分離了界面和業(yè)務(wù)邏輯，使代碼更易于維護(hù)、重用和測(cè)試。MVVM指代了三個(gè)部分，具體如下：
1.Model（模型）：模型代表著應(yīng)用程序中的數(shù)據(jù)和業(yè)務(wù)邏輯。在Vue.js中，模型可以是應(yīng)用程序的數(shù)據(jù)對(duì)象、服務(wù)端API返回的數(shù)據(jù)，或者其他需要進(jìn)行處理和展示的數(shù)據(jù)。
2.View（視圖）：視圖是用戶界面的可見部分，即用戶所看到和與之交互的界面元素。在Vue.js中，視圖由模板（Template）來(lái)定義，模板是一種聲明式的HTML擴(kuò)展語(yǔ)法，在模板中可以使用Vue的指令、插值表達(dá)式等來(lái)動(dòng)態(tài)渲染數(shù)據(jù)。
3.ViewModel（視圖模型）：視圖模型是連接視圖和模型的橋梁，負(fù)責(zé)處理視圖和模型之間的數(shù)據(jù)交互和邏輯控制。在Vue.js中，視圖模型由Vue實(shí)例來(lái)表示，它是一個(gè)JavaScript對(duì)象，包含了模板中所需的數(shù)據(jù)、方法和計(jì)算屬性等。
MVVM開發(fā)模式架構(gòu)圖
在Vue中，上圖Controller的功能便是通過數(shù)據(jù)的雙向綁定來(lái)實(shí)現(xiàn)的，而數(shù)據(jù)引發(fā)視圖的更新則是通過虛擬DOM來(lái)實(shí)現(xiàn)的。在運(yùn)用MVVM設(shè)計(jì)模式的情況下，Vue的工作原理如下：
當(dāng)用戶與視圖進(jìn)行交互（例如點(diǎn)擊按鈕、輸入表單等），視圖觸發(fā)相應(yīng)的事件。
視圖模型監(jiān)聽這些事件，并根據(jù)業(yè)務(wù)邏輯更新模型的數(shù)據(jù)。
當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，模型發(fā)送通知給視圖模型，視圖模型根據(jù)變化更新視圖。
視圖根據(jù)最新的數(shù)據(jù)重新渲染，展示給用戶。
上述過程主要為數(shù)據(jù)更新時(shí)的執(zhí)行邏輯，這個(gè)過程在Vue整個(gè)生命周期中屬于更新階段。而Vue 的生命周期實(shí)際上就是 Vue 組件從創(chuàng)建到銷毀的整個(gè)過程，被分為了四個(gè)階段，八個(gè)鉤子函數(shù)（可以理解為事件回調(diào)函數(shù)）。分別為創(chuàng)建階段、掛載階段、更新階段、銷毀階段，MVVM中視圖與模型的初始化和數(shù)據(jù)雙向綁定則在創(chuàng)建階段的beforeCreate以及掛在階段的mounted中實(shí)現(xiàn)。
2、數(shù)據(jù)雙向綁定的實(shí)現(xiàn)
Vue數(shù)據(jù)雙向綁定的實(shí)現(xiàn)實(shí)質(zhì)上也就是MVVM中Controller的實(shí)現(xiàn)。Vue的數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布/訂閱者的模式實(shí)現(xiàn)的，而數(shù)據(jù)劫持在Vue底層是通過Object.defineProperty()方法實(shí)現(xiàn)的。Object.defineProperty()方法是原生JS提供的一個(gè)定義對(duì)象屬性的接口，通過該方法的get和set配置項(xiàng)可以實(shí)現(xiàn)在一個(gè)對(duì)象中代理另一個(gè)對(duì)象的屬性變化，即getter和setter，這使得我們?cè)谠L問或修改對(duì)象的屬性時(shí)可以執(zhí)行自定義的邏輯。
在Vue中，當(dāng)我們定義一個(gè)響應(yīng)式數(shù)據(jù)時(shí)，Vue會(huì)將該數(shù)據(jù)轉(zhuǎn)化為一個(gè)稱為“響應(yīng)式代理對(duì)象”的對(duì)象（data配置項(xiàng)中的屬性）。在這個(gè)代理對(duì)象中，Vue就會(huì)使用Object.defineProperty()方法為對(duì)象中所有屬性定義一個(gè)getter和setter。從而當(dāng)我們?cè)L問響應(yīng)式代理對(duì)象的屬性時(shí)，Vue的getter會(huì)被觸發(fā)，從而執(zhí)行一些與數(shù)據(jù)相關(guān)的邏輯，例如依賴追蹤和通知訂閱者。而當(dāng)我們修改響應(yīng)式代理對(duì)象的屬性時(shí)，Vue的setter會(huì)被觸發(fā)，它會(huì)接收新的值并執(zhí)行一些對(duì)應(yīng)的更新操作，例如觸發(fā)視圖重新渲染。這種方式稱為“劫持”或“攔截”對(duì)象的訪問和修改操作，以實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)式。
在Vue劫持了所有需要監(jiān)聽的所有屬性后，結(jié)合Vue的消息發(fā)布-訂閱模式，每當(dāng)數(shù)據(jù)變化就會(huì)通過消息發(fā)布-訂閱模式的方式監(jiān)測(cè)到數(shù)據(jù)的變化，并重新編譯視圖以此實(shí)現(xiàn)響應(yīng)式。Vue中數(shù)據(jù)雙向綁定機(jī)制如圖所示，其中Dep 是訂閱收集器。
Vue雙向綁定原理
其中，Vue的數(shù)據(jù)監(jiān)測(cè)也是通過數(shù)據(jù)劫持的方式實(shí)現(xiàn)的，但Vue只會(huì)對(duì)對(duì)象進(jìn)行數(shù)據(jù)劫持為其生成setter和getter，而對(duì)于數(shù)組Vue并不會(huì)對(duì)其進(jìn)行數(shù)據(jù)劫持。對(duì)于數(shù)組Vue的處理方式是監(jiān)測(cè)數(shù)組數(shù)據(jù)調(diào)用的方法，當(dāng)調(diào)用了能夠改變?cè)瓟?shù)組的方法時(shí)，Vue會(huì)將該方法進(jìn)行二次封裝。原本這些方法只做了他們?cè)驹撟龅氖虑?，但Vue包裝過之后，還加了一件事進(jìn)去，即重新解析頁(yè)面生成虛擬DOM并執(zhí)行diff算法生成新的DOM結(jié)構(gòu)，交給瀏覽器進(jìn)行頁(yè)面的更新渲染，以此實(shí)現(xiàn)對(duì)數(shù)組數(shù)據(jù)改變的響應(yīng)。但是值得注意的是，那些不會(huì)引起原數(shù)組改變的方法以及通過數(shù)組索引直接進(jìn)行修改而沒有調(diào)用任何方法的情況，Vue并不會(huì)監(jiān)測(cè)到，因此也不會(huì)出現(xiàn)響應(yīng)式的效果。
3、虛擬DOM機(jī)制
Vue的虛擬DOM是一種在內(nèi)存中維護(hù)的輕量級(jí)DOM樹，在頁(yè)面初始渲染時(shí)生成，虛擬DOM機(jī)制的原理如下：
1）生成虛擬DOM：當(dāng)Vue組件首次渲染時(shí)，會(huì)生成一個(gè)虛擬DOM樹，稱為初始虛擬 DOM。這棵樹的結(jié)構(gòu)與實(shí)際的DOM結(jié)構(gòu)相似，但是只是在內(nèi)存中存在，并沒有直接渲染到頁(yè)面上。
2）更新虛擬DOM：當(dāng)組件的狀態(tài)發(fā)生變化時(shí)，Vue 會(huì)生成一個(gè)新的虛擬DOM樹，稱為更新虛擬DOM。該樹與初始虛擬DOM相比，只有發(fā)生變化的部分會(huì)被重新創(chuàng)建，其余部分則會(huì)被復(fù)用。
3）對(duì)比并計(jì)算差異：Vue會(huì)對(duì)比初始虛擬DOM和更新虛擬DOM，找出兩棵樹之間的差異。這個(gè)過程稱為虛擬DOM的diff算法。通過這個(gè)算法，Vue可以高效地找出需要進(jìn)行修改、添加或移除的節(jié)點(diǎn)。
4）批量更新真實(shí)DOM：根據(jù)差異的計(jì)算結(jié)果，Vue會(huì)將需要進(jìn)行修改的部分同步到實(shí)際的DOM中。由于虛擬DOM是在內(nèi)存中操作的，因此可以通過批量更新的方式，將多個(gè)DOM修改操作合并為一個(gè)，從而減少實(shí)際的DOM操作，提高性能。
虛擬DOM原理
在常規(guī)的直接操作實(shí)際DOM的方式下，頁(yè)面數(shù)據(jù)的每次改變都會(huì)引發(fā)瀏覽器重新計(jì)算和渲染整個(gè)DOM樹。這種操作會(huì)涉及到大量的DOM訪問和修改，而這些操作通常是相對(duì)較慢的，尤其在涉及復(fù)雜的頁(yè)面結(jié)構(gòu)和大量的DOM元素時(shí)。在數(shù)據(jù)發(fā)生改變需要重新解析頁(yè)面結(jié)構(gòu)的時(shí)候，Vue并不是直接將解析的頁(yè)面結(jié)構(gòu)直接交給瀏覽器渲染，而是先根據(jù)虛擬DOM采用Diff算法計(jì)算出DOM中更新的部分，然后只交給瀏覽器更新的部分去渲染，從而減少瀏覽器對(duì)DOM的操作和頁(yè)面的重排重構(gòu)，提高瀏覽器解析頁(yè)面的性能。所以本質(zhì)上來(lái)說(shuō)，虛擬DOM是利用了JS代碼的運(yùn)行速度來(lái)減負(fù)了瀏覽器更新DOM的消耗。
4、總結(jié)
在Vue中，MVVM的實(shí)現(xiàn)主要是通過數(shù)據(jù)雙向綁定以及虛擬DOM實(shí)現(xiàn)的，在Vue中的具體實(shí)現(xiàn)則是通過Vue實(shí)例來(lái)完成的。在Vue實(shí)例的生命周期中，在創(chuàng)建階段生成Vue實(shí)例完成ViewModel的初始化；在掛載階段使用Object.defineProperty()方法來(lái)劫持和觀察數(shù)據(jù)對(duì)象的屬性訪問和修改，完成數(shù)據(jù)與視圖的數(shù)據(jù)雙向綁定；在更新階段應(yīng)用虛擬DOM+Diff算法來(lái)高效地確定需要進(jìn)行修改、添加或刪除的節(jié)點(diǎn)并將更新的節(jié)點(diǎn)交給瀏覽器渲染，而不是直接操作實(shí)際的DOM，提高了渲染效率。需要注意的是，在Vue中，虛擬DOM主要用于優(yōu)化渲染性能，而非作為實(shí)現(xiàn)MVVM的核心機(jī)制。數(shù)據(jù)的雙向綁定才是MVVM模型的主要實(shí)現(xiàn)方式，虛擬DOM則是為了提高性能而引入的輔助手段。這樣，通過Vue實(shí)例作為ViewModel，開發(fā)者能夠更方便地管理和操作應(yīng)用的界面和數(shù)據(jù)，實(shí)現(xiàn)了視圖和數(shù)據(jù)模型之間的雙向綁定，使代碼更具可讀性和可維護(hù)性。
下載ECAD模型
