双向绑定实现原理

作者: key君 | 来源:发表于2019-10-16 10:53 被阅读0次

Vue._init->Vue. $mount->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