Quel est le principe de la liaison bidirectionnelle dans Vue ? Implémentation du principe de liaison bidirectionnelle de vue

Ce que cet article vous apporte concerne le principe de la liaison bidirectionnelle dans Vue ? L'implémentation principale de la liaison bidirectionnelle Vue a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Tout d'abord les rendus

Implémentation simple de la liaison bidirectionnelle des données
Commençons par comprendre une chose : Object.defineProperty()

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

Voici la description détaillée de ceci par MDN
Pour faire simple :

Cette méthode peut modifier la valeur de la propriété de l'objet existant
Object .defineProperty(obj, prop, descriptor)
Description du paramètre :
obj : objet définissant la propriété
prop : propriété modifiée
descripteur : descripteur de propriété modifié

ici Choisissez simplement le la plus simple,

get:

Official : Une méthode qui fournit un getter pour une propriété. S'il n'y a pas de getter, elle n'est pas définie. Lors de l'accès à la propriété, la méthode sera exécutée. Aucun paramètre n'est transmis lors de l'exécution de la méthode, mais l'objet this sera transmis (en raison de la relation d'héritage, ce n'est pas nécessairement ici l'objet qui définit la propriété) . La valeur par défaut n'est pas définie.

**En termes simples : lorsque vous avez besoin d'obtenir la valeur d'attribut d'un objet, appelez simplement cette fonction et obtenez la valeur**

set :

Officiel : A méthode qui fournit un setter pour une propriété, ou undefined s'il n'y a pas de setter. Cette méthode est déclenchée lorsque la valeur de la propriété est modifiée. Cette méthode acceptera le seul paramètre, qui est la nouvelle valeur du paramètre de la propriété. La valeur par défaut n'est pas définie.

** Pour faire simple : lorsque vous devez définir (modifier) ​​la valeur d'attribut d'un objet, appelez simplement cette fonction pour obtenir la modification **

Ensuite, ajoutez le code

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>
    

Recommandations associées :

Le principe de mise en œuvre de la liaison de données bidirectionnelle entre Angular et Vue (l'accent est mis sur la liaison bidirectionnelle de vue)

Explorer le principe de la liaison de données bidirectionnelle dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!