Vue数据双向绑定的原理+响应式原理

双向绑定原理：

1. 数据变化更新视图(model => view)
   是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()或Proxy()来给各个属性添加setter，getter并劫持监听，在数据变动时发布消息给订阅者，触发相应的监听回调，也就是通知watcher重新渲染页面
2. 视图变化更新数据(view => model) 利用事件监听（例如input、change事件等），拿到页面上输入的最新值赋值给data

响应式原理：

Vue的响应式原理

• 什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。 Object.defineProperty
  为对象中的每一个属性，设置 get 和 set 方法，每个声明的属性，都会有一个 专属的依赖收集器 subs，当页面使用到
  某个属性时，触发 ObjectdefineProperty - get函数，页面的 watcher 就会被 放到 属性的依赖收集器
  subs 中，在 数据变化时，通知更新； 当数据改变的时候，会触发Object.defineProperty -
  set函数，数据会遍历自己的 依赖收集器 subs，逐个通知 watcher，视图开始更新；

Vue3.x响应式数据原理

• Vue3.x改用Proxy替代Object.defineProperty。
  因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
  Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？
  判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
  监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。