javascript - Le suivi des dépendances de Vue est-il une liaison de données unidirectionnelle ou une liaison bidirectionnelle?

Question

Comme mentionné dans la documentation officielle du site Web, la directive v-model de Vue implémente la liaison bidirectionnelle des données.

https://vuejs.org/v2/guide/fo...

Cependant, dans le développement réel, le flux de données des composants est unidirectionnel et il n'est pas recommandé aux composants enfants de modifier les accessoires des composants parents.

La question est donc de savoir si le suivi des dépendances de Vue [prend en charge la liaison bidirectionnelle en principe, mais ne recommande que le flux de données unidirectionnel pour faciliter le développement], ou [ne prend pas en charge la liaison bidirectionnelle en principe, v-model écoute simplement le DOM Qu’en est-il du sucre syntaxique pour la mise en œuvre d’événements ?

Answer 1

Le suivi des dépendances de Vue est [en principe, la liaison bidirectionnelle n'est pas prise en charge, le v-model n'est qu'un sucre de syntaxe implémenté en écoutant les événements DOM]

Le suivi des dépendances de Vue est implémenté en convertissant toutes les propriétés de l'objet de données en getters/setters via Object.defineProperty ; lorsqu'une certaine valeur de propriété des données est modifiée, la fonction set sera déclenchée, et lorsque la valeur de propriété est obtenue, la fonction get sera déclenchée, grâce à cette fonctionnalité, la vue pourra être modifiée lorsque les données sont modifiées ; c'est-à-dire que le changement de vue ne sera déclenché que lorsque les données changeront. ne peut être modifié que via des événements DOM, puis la vue peut être modifiée. Ceci est utilisé pour obtenir une liaison bidirectionnelle

.

Le processus général est le suivant

    //data
    var obj = {
        'message':'hello'
    }

    //vm
    var val = obj.message
    Object.defineProperty(obj,'message',{
        get(){
            return val
        },
        set(value){
            val = value
            updataView()
        }
    })

    function updataView(){
        box.innerHTML = obj.message //触发get
    }

    // init
    updataView()

    textIpt.oninput = function(){
        obj.message = this.value //触发set
    }

La liaison bidirectionnelle consiste à lier les données et les vues au sein du même composant et n'a rien à voir avec la communication entre les composants parents et enfants ;
La communication entre les composants utilise un flux de données unidirectionnel pour une meilleure compréhension entre les composants pendant le couplage. développement, il peut y avoir plusieurs sous-composants qui dépendent de certaines données du composant parent. Si le sous-composant peut modifier les données du composant parent, une modification dans un sous-composant entraînera des modifications dans tous les sous-composants qui dépendent. sur ces données, donc Vue ne recommande pas de sous-composants. Si le composant modifie les données du composant parent, la modification directe des accessoires générera un avertissement

.