v-model双向绑定

双向绑定原理

• vue2中使用Object.defineProperty给数据的属性添加getter和setter方法来实现数据劫持，通过setter发布数据更新的消息，通过getter来订阅数据更新消息（观察数据变化）
• vue3中是使用Proxy对象给数据属性添加getter和setter
  • Object.defineProperty方法每次只能给一个属性添加getter和setter属性，Proxy是用代理机制，实现多个属性同时添加getter和setter属性
  • 代理的机制，主要是优化数据劫持定义的复杂性
• vue兼容问题：
  • defineProperty这个方法到IE9版本才有，也就是IE8及以下不可以vue
  • Proxy对象在IE11有实现，但是部分功能不可能；vue3完全不支持IE

v-model原理

• Object.defineProperty或者Proxy对象是实现双向绑定的原理
• v-model是一个数据双向绑定指令–语法糖
  • 它的实现：通过value属性传递参数，使用input事件来实现数据传递
  • < input v-model=‘count’/ >相当于< input v-bind:value=‘count’ @input=‘cb–v-model’