实现原理就是
- 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
- 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
- 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
-
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
