vue の mvvm と mvc の違いは何ですか-フロントエンドQ&A-php.cn

vue の mvvm と mvc の違いは何ですか

青灯夜游

リリース： 2021-10-26 17:30:05

オリジナル

2492 人が閲覧しました

違い: 1. mvvm の各部分間の通信は双方向ですが、mvc の各部分間の通信は一方向です。 2. MVVM はビューとモデルの自動同期を実現するため、モデルの属性が変更された場合、手動で dom 要素を操作してビューの表示を変更する必要はなく、属性変更後にビュー層を変更します。属性に対応する値は自動的に変更されます。

vue の mvvm と mvc の違いは何ですか

このチュートリアルの動作環境: Windows 7 システム、vue バージョン 2.9.6、DELL G3 コンピューター。

VUE は MVVM 設計パターンに基づいて開発されていますが、今日は MVC と MVVM の違いについて説明します。

#MVC：

m:モデルデータモデルレイヤー v:ビュービューレイヤー c:コントローラーコントローラー

#原則:

c 層は、ビュー層に表示されるモデル層のデータを制御する必要があります

MVC の 2 つのメソッド、画像の説明:

コード例:

非常に単純な p 表示の非表示効果を作成します。切り替えをクリックします。 p

html:

ログイン後にコピー

JS:

以下は、デザインモードなしで作成した JS です。この書き方はメンテナンスに役立ち、純粋にプロセス指向のコードを書くものではありません:

        let btn = document.getElementsByClassName("btn")[0];
        let boxDom = document.getElementsByClassName("box")[0];
        let flag = true;
        btn.onclick = function(){
            if(flag){
                boxDom.style.display = "none";
                flag = false;
            }else{
                boxDom.style.display = "block";
                flag = true;
            }
        }

ログイン後にコピー

MVC の書き方:

         //view
        let boxDom = document.getElementsByClassName("box")[0];
        //model
        let model = {
            isShow:true,
            isBig:false
        }
 
        //controller 业务逻辑
        function Controller(){
            this.init();//初始化
        }
        Controller.prototype = {
            constructor:Controller,
            init:function(){
                this.addEvent()
            },
            addEvent:function(){
                let btn = document.getElementsByClassName("btn")[0];
                let btn2 = document.getElementsByClassName("btn2")[0];
                let that = this;
                btn.onclick = function(){
                    model.isShow = !model.isShow;
                    //更改视图了
                    that.render();
                }
                btn2.onclick = function(){
                    model.isBig = true;
                    //更改视图了
                    that.render();
                }
            },
            render:function(){//数据驱动视图的更改
                boxDom.style.display = model.isShow?"block":"none";
                boxDom.style.width = model.isBig?"300px":"100px";
            }
        }
 
        new Controller();//初始化一下

ログイン後にコピー

MVC コードは比較的長いですが、同じ効果があり、再度使用できる限り、将来使用するのに非常に便利です。OK

MVVM について話しましょう

MVVM:m:モデルデータモデルレイヤー v:ビュービューレイヤー vm: ViewModel

vue は、mvc

MVVM から派生した mvvm モードを使用します。 mvc からのタイムリーなフィードバックの問題を解決するために、ビューとビューモデルは特に近くにあります

説明:

#MVVM に関しては、双方向バインディングとデータハイジャックの原則について説明する必要があります。

1 、双方向バインディングの原則とは何ですか?

(ビューが変更されたときにモデルレイヤーを更新し、モデルレイヤーが変更されたときにビューレイヤーを更新します)

Vue はデータハイジャックとサブスクリプション公開モードを採用しています:

vue は VM を作成するときに、インスタンス内のデータを構成し、次に Object.defineProperty を使用してデータを処理し、ゲッターメソッドとセッターメソッドをデータに追加します。データが取得されると、対応するゲッターメソッドがトリガーされます。データが設定されると、対応するセッターメソッドがトリガーされ、それによって VM 上のウォッチャーメソッドがさらにトリガーされます。その後、データが利用可能になると、VM はさらに更新されます景色。

2. データハイジャック:

vue.js は、データハイジャックをパブリッシャー/サブスクライバーモデルと組み合わせて使用し、Object.defineProperty() セッター、ゲッターを通じて各プロパティをハイジャックします。データが変更されたときにサブスクライバーにメッセージをパブリッシュし、応答リスニングコールバックをトリガーします。

Object.defineProperty コード例:

//Object.defineProperty  因为使用了ES5的很多特性 
        let _data = {}
        let middle = 111;
        Object.defineProperty(_data,"msg",{
            get(){
                return middle;
            },
            set(val){
               middle = val;
            }
        });
 
        console.log(_data.msg);//获取数据的时候，会调用对应对象属性的getter方法
        _data.msg = 222;//设置数据的时候，会调用对应对象属性的setter方法
        console.log(_data.msg);

ログイン後にコピー

概要:

mvvm と mvc の最大の違い:

MVVM は、ビューとモデルの自動同期を実現します。つまり、モデルの属性が変更された場合、ビューの表示を変更するために dom 要素を手動で操作する必要がなくなり、属性を変更した後、ビュー層が属性に対応する値は自動的に変更されます。