MVVM 模式

官方解釋?zhuān)篤ue 雖然沒(méi)有完全遵循 MVVM 模型，但是 Vue 的設(shè)計(jì)也受到了它的啟發(fā)。因此在文檔中經(jīng)常會(huì)使用 vm (ViewModel 的縮寫(xiě)) 這個(gè)變量名表示 Vue 實(shí)例。

什么是 MVVM 模式？

MVVM 是一種新的開(kāi)發(fā)模式，對(duì)比傳統(tǒng)模式，例如我們要更新 DOM ，一般都是通過(guò) JavaScript 處理數(shù)據(jù)然后操作 DOM API 將數(shù)據(jù)渲染到頁(yè)面上。后續(xù)每一次修改數(shù)據(jù)后，都要重新調(diào)用 DOM API 進(jìn)行數(shù)據(jù)渲染。當(dāng)用戶操作表單信息后，也要將數(shù)據(jù)同步到 JavaScript 數(shù)據(jù)中，這一系列操作將會(huì)變得很繁瑣。而在 MVVM 模式中，我們只要關(guān)心數(shù)據(jù)層面，而不需要關(guān)心渲染邏輯層面，假設(shè)我們修改 JavaScript 中的數(shù)據(jù)后，Vue 會(huì)自動(dòng)實(shí)時(shí)將數(shù)據(jù)渲染到頁(yè)面上，當(dāng)我們操作視圖中表單的數(shù)據(jù)時(shí)，Vue 也會(huì)實(shí)時(shí)的將數(shù)據(jù)同步到 JavaScript，并不需要我們自己手動(dòng)調(diào)用操作 DOM API 的一系列操作。

MVVM 主要分為 Model、View、ViewModel 三者

• Model：代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在 Model 層中定義
• View：代表 UI 視圖，負(fù)責(zé)數(shù)據(jù)的展示
• ViewModel：負(fù)責(zé)監(jiān)聽(tīng) Model 中數(shù)據(jù)的改變并且控制視圖的更新

MVVM 模式簡(jiǎn)化了界面與業(yè)務(wù)的依賴(lài)，解決了數(shù)據(jù)頻繁更新。MVVM 在使用當(dāng)中，利用雙向綁定技術(shù)，使得 Model 變化時(shí)，ViewModel 會(huì)自動(dòng)更新，而 ViewModel 變化時(shí)，View 也會(huì)自動(dòng)變化。

以下通過(guò)代碼的方式進(jìn)行了解 Model、View、ViewModel

<template>
    <div id="app">{{ message }}</div>
</template>

在 template 中的代碼就相當(dāng)于 View 視圖層

const app = new Vue({
    el: '#app',
    data: function () {
        return {
            message: 'Hello Vue!'
        }
    }
})

其中選項(xiàng) data 就是 Model 數(shù)據(jù)層，而 new Vue 則是 ViewModel 控制層，負(fù)責(zé)監(jiān)聽(tīng)數(shù)據(jù)層發(fā)生變化，更新視圖層。監(jiān)聽(tīng)視圖層發(fā)生變化更新數(shù)據(jù)層。

以上就是VUE2中的MVVM模式詳解的詳細(xì)內(nèi)容，更多關(guān)于VUE2 MVVM模式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論