Vue中双向绑定v-model在2.x与3.x的原理

2.x原理:使用的是object.defineproperty给对象属性设置了get与set方法

Vue中双向绑定v-model在2.x与3.x的原理

Vue中双向绑定v-model在2.x与3.x的原理

(当input框里面的内容发生改变时,在oninput事件中把input框中的值赋值给data.name,然后再使用object.defineproperty的set中将data.name改变的值给div盒子,这样就实现了双向绑定

缺点:如果有多个值需要双向绑定,那么就得创建多个object.defineproperty

3.x原理:proxy(代理)

Vue中双向绑定v-model在2.x与3.x的原理

Vue中双向绑定v-model在2.x与3.x的原理

原理跟使用object.defineproperty差不多,当修改input中的值时,将值赋值给obj代码的对象p中的属性name,然后在p中属性的值有修改的时候,将修改的值设置给div盒子

这里就解决了2.x的缺点,不用添加多个双向绑定时要创建多个方法

(自己可以按照上面的代码瞧一瞧或许可以更快理解)