Vue中的MVVM模式使用及說明

更新時(shí)間：2023年06月02日 10:11:39 作者：西瓜咬人啦

這篇文章主要介紹了Vue中的MVVM模式使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

MVVM模式

簡(jiǎn)介

? MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù)，通過從視圖層中幾乎刪除所有GUI代碼（代碼隱藏），更好地促進(jìn)視圖層開發(fā)與模式其余部分的分離。

不需要用戶體驗(yàn)（UX）開發(fā)人員編寫GUI代碼，他們可以使用框架標(biāo)記語言（如XAML），并創(chuàng)建到應(yīng)用程序開發(fā)人員編寫和維護(hù)的視圖模型的數(shù)據(jù)綁定。

角色的分離使得交互設(shè)計(jì)師可以專注于用戶體驗(yàn)需求，而不是對(duì)業(yè)務(wù)邏輯進(jìn)行編程。

這樣，應(yīng)用程序的層次可以在多個(gè)工作流中進(jìn)行開發(fā)以提高生產(chǎn)力。即使一個(gè)開發(fā)人員在整個(gè)代碼庫上工作，視圖與模型的適當(dāng)分離也會(huì)更加高效，因?yàn)榛谧罱K用戶反饋，用戶界面通常在開發(fā)周期中經(jīng)常發(fā)生變化，而且處于開發(fā)周期后期。

MVVM模式試圖獲得MVC提供的功能性開發(fā)分離的兩個(gè)優(yōu)點(diǎn)，同時(shí)利用數(shù)據(jù)綁定的優(yōu)勢(shì)和通過綁定數(shù)據(jù)的框架盡可能接近純應(yīng)用程序模型。

它使用綁定器、視圖模型和任何業(yè)務(wù)層的數(shù)據(jù)檢查功能來驗(yàn)證傳入的數(shù)據(jù)。

結(jié)果是模型和框架驅(qū)動(dòng)盡可能多的操作，消除或最小化直接操縱視圖的應(yīng)用程序邏輯（如代碼隱藏）。

MVVM

M (model)：模型對(duì)象：指的是構(gòu)成界面內(nèi)容的相關(guān)數(shù)據(jù)
V(view): view: 視圖對(duì)象：指的是給用戶或者開發(fā)者展示數(shù)據(jù)的界面
VM(viewmodel): 視圖模型對(duì)象：是view與model之間的橋梁

MVVM模式的組成部分

模型

模型是指代表真實(shí)狀態(tài)內(nèi)容的領(lǐng)域模型（面向?qū)ο螅?，或指代表?nèi)容的數(shù)據(jù)訪問層（以數(shù)據(jù)為中心）。

視圖

就像在MVC和MVP模式中一樣，視圖是用戶在屏幕上看到的結(jié)構(gòu)、布局和外觀（UI）。

視圖模型

視圖模型是暴露公共屬性和命令的視圖的抽象。

MVVM沒有MVC模式的控制器，也沒有MVP模式的presenter，有的是一個(gè)綁定器。

在視圖模型中，綁定器在視圖和數(shù)據(jù)綁定器之間進(jìn)行通信。

綁定器

聲明性數(shù)據(jù)和命令綁定隱含在MVVM模式中。在Microsoft解決方案堆中，綁定器是一種名為XAML的標(biāo)記語言。

綁定器使開發(fā)人員免于被迫編寫樣板式邏輯來同步視圖模型和視圖。

在微軟的堆之外實(shí)現(xiàn)時(shí)，聲明性數(shù)據(jù)綁定技術(shù)的出現(xiàn)是實(shí)現(xiàn)該模式的一個(gè)關(guān)鍵因素。

Vue.js的核心ViewModel

ViewModel是Vue.js的核心，它是一個(gè)Vue實(shí)例。

Vue實(shí)例是作用于某一個(gè)HTML元素上的，這個(gè)元素可以是HTML的body元素，也可以是指定了id的某個(gè)元素。

創(chuàng)建了ViewModel后的雙向綁定達(dá)成

首先，我們將上圖中的DOM Listeners和Data Bindings看作兩個(gè)工具，它們是實(shí)現(xiàn)雙向綁定的關(guān)鍵。

從View側(cè)看，ViewModel中的DOM Listeners工具會(huì)幫我們監(jiān)測(cè)頁面上DOM元素的變化，如果有變化，則更改Model中的數(shù)據(jù)；
從Model側(cè)看，當(dāng)我們更新Model中的數(shù)據(jù)時(shí)，Data Bindings工具會(huì)幫我們更新頁面中的DOM元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- div鋪滿全屏而不是縮放網(wǎng)頁  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Edge 模式通知 Windows Internet Explorer 以最高級(jí)別的可用模式顯示內(nèi)容，
        這實(shí)際上破壞了“鎖定”模式。即如果你有IE9的話說明你有IE789，那么就調(diào)用高版本的那個(gè)也就是IE9。
     -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生實(shí)現(xiàn)js實(shí)現(xiàn)M-V-VM</title>
    <script>
        /*
          MVVM : model 模型對(duì)象--》指的是構(gòu)成界面內(nèi)容的相關(guān)數(shù)據(jù)
                 view  視圖對(duì)象--》指的給給用戶或者開發(fā)者展示數(shù)據(jù)的界面
                 viewmodel 視圖模型對(duì)象--》 指的是view與model之間的橋梁
        */
        let msg="Hello world!";//相當(dāng)于model
        window.onload=function(){
            let h4Dom = document.getElementById("h4Dom");
            let inputDom = document.getElementById("inputDom");
            h4Dom.innerHTML=msg;
            inputDom.value=msg;
            //通過對(duì)事件源的監(jiān)聽來實(shí)現(xiàn)，為js對(duì)象實(shí)現(xiàn)動(dòng)態(tài)事件監(jiān)聽
            //input輸入事件
            inputDom.addEventListener("input",function(){
                msg=this.value;
                h4Dom.innerHTML=msg;
            });
        }
    </script>
</head>
<body>
    <div>
        <h4 id="h4Dom"></h4>
        <input type="text" value="" id="inputDom"/>
    </div>
</body>
</html>

實(shí)現(xiàn)效果