vuereact & vue & angular

v-model 双向绑定

2022-07-18  本文已影响0人  Mr_余

v2 .v-model的实现原理 

两个指令的结合 v-bind 绑定表单的value属性  v-on 绑定input事件 

当输入框的内容发生改变后  会触发input事件  拿到事件对象 赋值 实现双向绑定

      vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现 通过Object.defineProperty 劫持数据发生的改变 如果数据发生了改变(在set中进行赋值) 触发update方法进行更新节点内容{{str}从而实现数据顺序绑定的原理

v3 .v-model的实现原理 

               在v2中,v-model  ===> @input,      value

               在v3中,v-model  ===> @update:modelValue, modelValue

上一篇 下一篇

猜你喜欢

热点阅读