MVVM 模式

官方解釋：Vue 雖然沒有完全遵循 MVVM 模型，但是 Vue 的設計也受到了它的啟發(fā)。因此在文檔中經(jīng)常會使用 vm (ViewModel 的縮寫) 這個變量名表示 Vue 實例。

什么是 MVVM 模式？

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

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

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

MVVM 模式簡化了界面與業(yè)務的依賴，解決了數(shù)據(jù)頻繁更新。MVVM 在使用當中，利用雙向綁定技術(shù)，使得 Model 變化時，ViewModel 會自動更新，而 ViewModel 變化時，View 也會自動變化。

以下通過代碼的方式進行了解 Model、View、ViewModel

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

在 template 中的代碼就相當于 View 視圖層

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

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

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

最新評論