vue与react的数据绑定

什么是单项绑定、双向绑定？

• 单项绑定（例：react）：顾名思义，就是将model值绑定至视图层，更新model时自动更新视图。
• 双向绑定（例：vue）：用户在视图层操作数据的同时，model也被更新了。

粗略地看，双向绑定免去了向model层插入数据的操作，简化了代码，提升了开发效率。是的，现在追求开发效率，很多公司都在使用vue来开发，v-model一加，舍我其谁？（逃

原理

VUE中双向绑定

vue2中使用Object.defineProperty()方法来进行数据劫持以及发布者- 订阅模式来实现双向绑定，数据劫持的时候会遍历每个属性，对每个属性加上get、set方法

实现原理就是

1. 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2. 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3. 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4. mvvm入口函数，整合以上三者

vue3中已经将双向绑定使用Proxy重写，解决了当年vue2不能监听数组变化的苦恼，同时也提升了效率。 Proxy的劫持手段则是官宣标准——直接监听data的所有域值，免去了Object.defineProperty循环遍历才能劫持每一个属性的hack。

    //data is our source object being observedconst 
    observer = new Proxy(data, {
        get(obj, prop) { ... },
        set(obj, prop, newVal) { ... },
        deleteProperty() {
        //invoked when property from source data object is deleted
        }
    })

Proxy构造函数的第一个参数是原始数据data；第二个参数是一个叫handler的处理器对象。Handler是一系列的代理方法集合，它的作用是拦截所有发生在data数据上的操作。这里的get()和set()是最常用的两个方法，分别代理访问和赋值两个操作。在Observer里，它们的作用是分别调用dep.depend()和dep.notify()实现订阅和发布。直接反映在Vue里的好处就是：我们不再需要使用Vue.$set()这类响应式操作了。除此之外，handler共有十三种劫持方式，比如deleteProperty就是用于劫持域删除。

React中的单项数据流

react中对数据的概念是：数据的流向只能通过props由外层到内层 一层一层往里传递。

对于父子组件来说，父组件总是通过 Props 向子组件传递数据。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

当然，你在平时开发的时候真的是数据一层一层的从model流到layout到业务组件的吗？ 那当然肯定不是的，业务组件层级搞起来了，那还玩个锤子？所以react加了个context这个东西，方便我们组件隔代通信。

优缺点

相比于vue一个:form="formData"，react每次表单操作都需要手动更新state的值，这样给人一种哆嗦的感觉，代码书写上 VUE win。 但这里抛出一个问题： 数据每次变化时，视图都要更新吗？

单向数据流其实是没有状态的, 这使得单向绑定能够避免状态管理在复杂度上升时产生的各种问题, 程序的调试会变得相对容易。 双向绑定就显得复杂的很多，需要手动处理状态变化的逻辑, 例如子组件修改父组件，兄弟组件互相修改，使得程序复杂度上升, 难以调试, 当业务逻辑复杂时，就会无从下手。

参考： 剖析Vue原理&实现双向绑定MVVM