双向绑定实现原理
2019-10-16 本文已影响0人
key君
Vue._init->Vue.mount扩展->mountCompoent->Watcher->get->updateCompoent->Vue._update->patch->createElm->createChildren->invokeCreateHooks->updateDOMProps
updateDOMProps:给input.value赋值
src/platforms/web/runtime/modules/event.js
updateDOMListeners 里面做的就是addEventListener
v-model实际上是个语法糖 为了简化代码
input的v-model
组件第一次patch的时候 给value赋值变量
加上input监听 当输入有更新的时候 会重新给value绑定的变量赋值 双向绑定就实现了
打印的是Vue.options.render
image.png
自定义组件的v-model
自定义组件会把value和监听包裹在model里
src/core/vdom/create-component.js
transformModel() 把data.model做了转换 这个方法做了on.input = callback
src/core/vdom/patch.js
createComponent->initComponent()->invokeCreateHooks()属性更新
image.png
