v-mode最后实际上是在当前实例(el)
上添加
addAttr(el, ‘value’, (${value})
) 相当于(el.prop)
addHandler(el, event, code, null, true) (el. event)
实际v-mode相当于读法糖
最后生成代码描述:
"_c('div',[_c('input',{directives:[{name:"model",rawName:"v-model",value:(message),expression:"message"}],domProps:{"value":(message)},on:{"input":function($event){if($event.target.composing)return;message=$event.target.value}}})])"
至此编译过程完毕
var code = generate(ast, options);
code
return {
ast: ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
runtime阶段:
会对v-model:{} 加强,
最后:
var directive = {
inserted: function inserted (el, binding, vnode, oldVnode) {
debugger
if (vnode.tag === 'select') {
// #6903
if (oldVnode.elm && !oldVnode.elm._vOptions) {
mergeVNodeHook(vnode, 'postpatch', function () {
directive.componentUpdated(el, binding, vnode);
});
} else {
setSelected(el, binding, vnode.context);
}
el._vOptions = [].map.call(el.options, getValue);
} else if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
el._vModifiers = binding.modifiers;
if (!binding.modifiers.lazy) {
el.addEventListener('compositionstart', onCompositionStart);
el.addEventListener('compositionend', onCompositionEnd);
// Safari < 10.2 & UIWebView doesn't fire compositionend when
// switching focus before confirming composition choice
// this also fixes the issue where some browsers e.g. iOS Chrome
// fires "change" instead of "input" on autocomplete.
el.addEventListener('change', onCompositionEnd);
/* istanbul ignore if */
if (isIE9) {
el.vmodel = true;
}
}
}
},
至此 显然遍历v-model对象是为给当前实例挂载 监听原生方法 el.addEventListener ,从而调用 我们之前 实现的自定义方法 :
{"input":function($event){if($event.target.composing)return;message=$event.target.value}}})])