双绑原理

2019-10-18  本文已影响0人  key君

what:
双绑是数据和视图相互作用,表现为v-model指令,实际是语法糖。
why:
使用方便快捷
where:
表单控件或自定义组件
how:
v-model = "model"
实现原理:
编译和解析两部分
v-model编译为事件和赋值两部分

原生v-model 编译阶段得到domProps和on
patch(创建元素)时再解析为事件监听(event.js)和value(domProps.js)赋值
PS:type不同结果不同

domProps:{'value': (foo)},
on:{
"input":function($event){
      foo=$event.target.value
  }
}

自定义组件v-model
创建组件时,处理model,最终还是转化为on属性 组件实例构建initEvent时监听事件,先创建组件实例才能监听和派发事件

model:{
  callback:..
}
上一篇下一篇

猜你喜欢

热点阅读