javascript - Ist die Abhängigkeitsverfolgung von Vue eine einseitige Datenbindung oder eine bidirektionale Bindung?
大家讲道理
大家讲道理 2017-07-05 10:53:36
0
1
784

Wie in der offiziellen Website-Dokumentation erwähnt, implementiert die v-model-Direktive von Vue eine bidirektionale Bindung von Daten.

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

In der tatsächlichen Entwicklung ist der Datenfluss der Komponenten jedoch einseitig, und es wird nicht empfohlen, dass untergeordnete Komponenten die Eigenschaften der übergeordneten Komponenten ändern.

Die Frage ist also, ob Vues Abhängigkeitsverfolgung [prinzipiell die bidirektionale Bindung unterstützt, aber aus Gründen der Entwicklungsfreundlichkeit nur einen einseitigen Datenfluss empfiehlt] oder [unterstützt prinzipiell keine bidirektionale Bindung, v-model hört nur auf das DOM Was ist mit syntaktischem Zucker für die Event-Implementierung?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

Antworte allen(1)
大家讲道理

Vue 的依赖追踪是【原理上不支持双向绑定,v-model 只是通过监听 DOM 事件实现的语法糖】

vue的依赖追踪是通过 Object.defineProperty 把data对象的属性全部转为 getter/setter来实现的;当改变数据的某个属性值时,会触发set函数,获取该属性值的时候会触发get函数,通过这个特性来实现改变数据时改变视图;也就是说只有当数据改变时才会触发视图的改变,反过来在操作视图时,只能通过DOM事件来改变数据,再由此来改变视图,以此来实现双向绑定

大致过程如下

    //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
    }

双向绑定是在同一个组件内,将数据和视图绑定起来,和父子组件之间的通信并无什么关联;
组件之间的通信采用单向数据流是为了组件间更好的解耦,在开发中可能有多个子组件依赖于父组件的某个数据,假如子组件可以修改父组件数据的话,一个子组件变化会引发所有依赖这个数据的子组件发生变化,所以vue不推荐子组件修改父组件的数据,直接修改props会抛出警告

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!