借鑒什么是MVVM，MVC和MVVM的區(qū)別，MVVM框架VUE實現(xiàn)原理

MVC

MVC的全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，是一種軟件設(shè)計典范。它是用一種業(yè)務(wù)邏輯、數(shù)據(jù)與界面顯示分離的方法來組織代碼，將眾多的業(yè)務(wù)邏輯聚集到一個部件里面，在需要改進(jìn)和個性化定制界面及用戶交互的同時，不需要重新編寫業(yè)務(wù)邏輯，達(dá)到減少編碼的時間。

• Model（模型） - 模型代表一個存取數(shù)據(jù)的對象或 JAVA POJO。它也可以帶有邏輯，在數(shù)據(jù)變化時更新控制器。
• View（視圖） - 視圖代表模型包含的數(shù)據(jù)的可視化。
• Controller（控制器） - 控制器作用于模型和視圖上。它控制數(shù)據(jù)流向模型對象，并在數(shù)據(jù)變化時更新視圖。它使視圖與模型分離開。

用戶首先在界面中進(jìn)行人機(jī)交互，然后請求發(fā)送到控制器，控制器根據(jù)請求類型和請求的指令發(fā)送到相應(yīng)的模型，模型可以與數(shù)據(jù)庫進(jìn)行交互，進(jìn)行增刪改查操作，完成之后，根據(jù)業(yè)務(wù)的邏輯選擇相應(yīng)的視圖進(jìn)行顯示，此時用戶獲得此次交互的反饋信息，用戶可以進(jìn)行下一步交互，如此循環(huán)

MVVM

MVVM是Model-View-ViewModel的縮寫。即模型-視圖-視圖模型。

【模型】指的是后端傳遞的數(shù)據(jù)。

【視圖】指的是所有看到的頁面。

【視圖模型】mvvm模式的核心，它是連接view和model的橋梁。它有兩個方向：一是將【模型】轉(zhuǎn)化成【視圖】，即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁面。實現(xiàn)的方式是：數(shù)據(jù)綁定。二是將【視圖】轉(zhuǎn)化成【模型】，即將所看到的頁面轉(zhuǎn)化成后端的數(shù)據(jù)。實現(xiàn)的方式是：DOM事件監(jiān)聽。這兩個方向都實現(xiàn)的，我們稱之為數(shù)據(jù)的雙向綁定。

總結(jié)：在MVVM的框架下視圖和模型是不能直接通信的。它們通過ViewModel來通信，ViewModel通常要實現(xiàn)一個observer觀察者，當(dāng)數(shù)據(jù)發(fā)生改變，ViewModel能夠監(jiān)聽到數(shù)據(jù)的這種變化，然后通知到對應(yīng)的視圖做自動更新，而當(dāng)用戶操作視圖，ViewModel也能監(jiān)聽到視圖的變化，然后通知數(shù)據(jù)做改動，這實際上就實現(xiàn)了數(shù)據(jù)的雙向綁定。并且MVVM中的View和ViewModel可以互相通信。

MVVM流程如下：

MVVM.jpg

例：

    <!-- M-V-VM V: view用于顯示-->
    <div class="out">
        {{msg}}
    </div>
    <script src="./vue.js"></script>
    <script>
            // M-V-VM VM: ViewModel，用于連接view和model的
        const app = new Vue({
            el:".out",
            // M-V-VM M: model，用于定義和管理數(shù)據(jù)
            data:{
                msg:'sss',//可以通過任何地方獲取或者修改這個數(shù)據(jù)，app.$data.msg  簡寫app.msg
            }
        });
        
    </script>