vue2/vue3 双向数据绑定

• vue2的双向数据绑定原理

首先利用ES5 的 defineProperty的get、set来定义获取属性，然后调用Ovserve方法，启用观察者模式，当数据发生变化时，会通知watcher重新计算（每个组件实例都会对应一个watcher实例），通过compile模版指令更新视图（组件重新渲染）。

Vue的DOM更新是异步执行的，详见：vue2和vue3中nextTick的对比

Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
        var value = getter ? getter.call(obj) : val;
        if (Dep.target) {
          dep.depend();
          if (childOb) {
            childOb.dep.depend();
            if (Array.isArray(value)) {
              dependArray(value);
            }
          }
        }
        return value
      },
      set: function reactiveSetter (newVal) {
        var value = getter ? getter.call(obj) : val;
        /* eslint-disable no-self-compare */
        if (newVal === value || (newVal !== newVal && value !== value)) {
          return
        }
        /* eslint-enable no-self-compare */
        if (customSetter) {
          customSetter();
        }
        // #7981: for accessor properties without setter
        if (getter && !setter) { return }
        if (setter) {
          setter.call(obj, newVal);
        } else {
          val = newVal;
        }
        childOb = !shallow && observe(newVal);
        dep.notify();
      }
    });

• vue3的双向数据绑定原理

利用ES6 的 Proxy 代理对象

二者的对比可见：Vue3/Vue3新特性（优点）

React 单向数据流

React 不是双向数据绑定，而是单向数据流

但 React 可以通过受控组件实现类似双向绑定的效果，这只是模式上的相似，原理和 Vue 的双向绑定有本质区别。

react是如何数据驱动视图改变的？

每次渲染形成虚拟dom，然后diff虚拟dom是否发生变化，如果有变化就更新真正的dom