這篇文章將為大家詳細(xì)講解有關(guān)如何理解Vue的MVVM模式，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)專注于涇川企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。涇川網(wǎng)站建設(shè)公司,為涇川等地區(qū)提供建站服務(wù)。全流程按需策劃，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

近幾年伴隨著Vue.js的版本升級(jí)，Vue.js也被越來(lái)越多的開(kāi)發(fā)人員作為前端框架首選，可以這樣說(shuō)，一個(gè)前端不了解Vue算不上一個(gè)優(yōu)秀的前端工程師，當(dāng)然面試升職不會(huì)Vue更會(huì)遭到很多閉門羹。

那么什么是Vue呢？

Vue.js 是一個(gè)輕巧、高性能、可組件化的 MVVM 庫(kù)，擁有非常容易上手的 API

很多初學(xué)者在剛剛學(xué)習(xí)Vue的時(shí)候，基本就開(kāi)始拿起手冊(cè)開(kāi)寫代碼，其實(shí)在開(kāi)始寫Vue之前，我們有必要了解Vue.js的MVVM模式和jq的MVP模式。

先看效果：

我們想實(shí)現(xiàn)todolist的效果，也就是輸入框輸入內(nèi)容提交后，在下面會(huì)顯示出輸入的內(nèi)容。

這個(gè)效果實(shí)現(xiàn)并不難，Vue和jq都可以，那么同樣的前端效果，jq也可以實(shí)現(xiàn)，那為什么要首選Vue呢？那么這要從兩者不同的模式開(kāi)始說(shuō)起。

MVP 模式

MVP模式就是我們?cè)趯慾q代碼的模式，我們來(lái)看MVP分別代表什么：

model層（數(shù)據(jù)層），

presenter層（控制層/業(yè)務(wù)邏輯相關(guān)）

view（視圖層）

Presenter是最核心的一層，在用jq實(shí)現(xiàn)效果的時(shí)候，會(huì)發(fā)現(xiàn)有大量的代碼在操作DOM。

        
        
        提交
        

    

    

我們會(huì)發(fā)現(xiàn)jq是通過(guò)改變頁(yè)面的Dom結(jié)構(gòu)實(shí)現(xiàn)效果，獲取輸入框數(shù)據(jù)后，會(huì)不斷的增加li標(biāo)簽，從而實(shí)現(xiàn)效果。所以實(shí)現(xiàn)前端效果，Presenter層占了很大的代碼比例，model層相比下代碼量很少。

MVVM 模式

MVVM 是 Model-View-ViewModel 的縮寫。

其中Model 層代表數(shù)據(jù)模型，也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表 UI組件，可以理解為html頁(yè)面代碼，ViewModel 是一個(gè)同步 View 和 Model 的對(duì)象。

MVVM 更多的是處理數(shù)據(jù)，而不是操作DOM。

相同的效果，我們看看Vue是如何實(shí)現(xiàn)的：

    
        
        提交
        
        

            
{{item}}
        
    

    

可見(jiàn)，Vue是通過(guò)獲取input數(shù)據(jù)，然后v-for數(shù)據(jù)循環(huán)來(lái)實(shí)現(xiàn)效果，而不是修改html，這是MVP模式和MVVM模式最大的區(qū)別。

那么頻繁的操作DOM的缺點(diǎn)是效率低，解析速度慢，內(nèi)存占用量過(guò)高，如果頁(yè)面比較長(zhǎng)，其缺點(diǎn)會(huì)更加暴露出來(lái)，那么加載時(shí)間也就不會(huì)很快了。

這也就是為什么同樣的效果，我們都在追尋前沿的Vue,慢慢淘汰掉jq的原因。升職加薪，Vue技能趕緊get起來(lái)吧。

關(guān)于如何理解Vue的MVVM模式就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。