Was ist das Prinzip der bidirektionalen Bindung in Vue? Implementierung des Prinzips der bidirektionalen Vue-Bindung

Was Ihnen dieser Artikel bringt, ist das Prinzip der bidirektionalen Bindung in Vue? Die prinzipielle Implementierung der Vue-Zwei-Wege-Bindung hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Zuerst die Darstellungen

Einfache Implementierung der bidirektionalen Datenbindung
Lassen Sie uns zunächst eines verstehen : Object.defineProperty()

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

Hier ist MDNs detaillierte Beschreibung dazu
Einfach ausgedrückt:

Diese Methode kann den Wert der vorhandenen Objekteigenschaft ändern
Objekt. defineProperty (obj, prop, descriptor)
Parameterbeschreibung:
obj: objektdefinierende Attribute
prop: modifiziertes Attribut
descriptor: modifizierter Attributdeskriptor

Nur ​​hier auswählen Um es einfach auszudrücken ,

get:

Offiziell: Eine Methode, die einen Getter für eine Eigenschaft bereitstellt. Wenn kein Getter vorhanden ist, ist er undefiniert. Wenn auf die Eigenschaft zugegriffen wird, wird die Methode ausgeführt. Bei der Ausführung der Methode werden keine Parameter übergeben, aber dieses Objekt wird übergeben (aufgrund der Vererbungsbeziehung ist dies hier nicht unbedingt das Objekt, das die Eigenschaft definiert). . Der Standardwert ist undefiniert.

**Einfach ausgedrückt: Wenn Sie den Attributwert eines Objekts abrufen müssen, rufen Sie einfach diese Funktion auf und erhalten Sie den Wert**

Set:

Beamter: A Methode, die einen Setter für eine Eigenschaft bereitstellt, oder undefiniert, wenn kein Setter vorhanden ist. Diese Methode wird ausgelöst, wenn der Eigenschaftswert geändert wird. Diese Methode akzeptiert den einzigen Parameter, nämlich den neuen Parameterwert der Eigenschaft. Der Standardwert ist undefiniert.

** Einfach ausgedrückt: Wenn Sie den Attributwert eines Objekts festlegen (ändern) müssen, rufen Sie einfach diese Funktion auf, um die Änderung zu erreichen. **

Als nächstes fügen Sie den Code hinzu

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>
    

Verwandte Empfehlungen:

Das Implementierungsprinzip der bidirektionalen Datenbindung zwischen Angular und Vue (der Schwerpunkt liegt auf der bidirektionalen Bindung von Vue)

vue Erkundung des Prinzips der bidirektionalen Datenbindung

Das obige ist der detaillierte Inhalt vonWas ist das Prinzip der bidirektionalen Bindung in Vue? Implementierung des Prinzips der bidirektionalen Vue-Bindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!