双向绑定原理
- 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’