Vue の双方向バインディングの原理は何ですか? vue 双方向バインディングの原則の実装

この記事では、vue の双方向バインディングの原理について説明します。 Vue の双方向バインディングの原則的な実装は、参考になると思います。

最初にレンダリング

データの双方向バインディングの簡単な実装
最初に 1 つのことを理解しましょう: Object.defineProperty()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

これについての MDN の詳細な説明は次のとおりです。
簡単に言うと:

このメソッドは、既存のオブジェクト プロパティの値を変更できます
Object。 defineProperty (obj, prop, descriptor)
パラメータの説明:
obj: 属性を定義するオブジェクト
prop: 変更された属性
descriptor: 変更された属性記述子

ここだけを選択 簡単に言うと,

get:

Official: プロパティのゲッターを提供するメソッドです。ゲッターがない場合、それは未定義です。プロパティにアクセスすると、メソッドが実行されます。メソッドの実行時にパラメータは渡されませんが、this オブジェクトが渡されます (継承関係により、ここでは必ずしもプロパティを定義するオブジェクトとは限りません)。 。デフォルトは未定義です。

**簡単に言えば、オブジェクトの属性値を取得する必要がある場合は、この関数を呼び出して値を取得するだけです**

set:

公式: Aプロパティのセッターを提供するメソッド、またはセッターがない場合は未定義。このメソッドは、プロパティ値が変更されるとトリガーされます。このメソッドは、プロパティの新しいパラメータ値である唯一のパラメータを受け入れます。デフォルトは未定義です。

##**簡単に言うと、オブジェクトの属性値を設定 (変更) する必要がある場合、この関数を呼び出すだけで、変更された **

次のコード

nbsp;html>

    
        <meta>
        <meta>
        <title></title>
    
    
        <div></div>
        <div>
            <input>
        </div>
        <script>
            var data = {};
            var dom_aa = document.getElementById("aa")
            
            function changedata(value){
                data.a = value
            }

            //直接使用Object.defineProperty里面的set方法进行视图改变
            Object.defineProperty(data,"a",{
                set:function(newValue){
                    dom_aa.innerHTML = newValue;
                },
                get:function(){
                    return a;
                }
            })
        </script>
    

# が実現されます。 ##関連する推奨事項:

#Angular と Vue の間の双方向データ バインディングの実装原則 (vue の双方向バインディングに重点を置いています)

#vue 双方向データ バインディングの原則の探索

##

以上がVue の双方向バインディングの原理は何ですか? vue 双方向バインディングの原則の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。