vue2源码解析---v-model双向数据绑定

什么是v-model

v-model 是 Vue 中的一个指令，用于实现表单元素与 Vue 实例中数据的双向绑定。这意味着当表单元素的值发生变化时，Vue 实例中的数据也会随之更新

工作原理

生成ast树

本质上是语法糖结合了v-bind和v-on两个指令
示例代码

new Vue({el: '#app',data () {return {msg: 'Hello, msg'}},template: `<input v-model="msg" />`
})

源码解析

processElement方法中调用processAttrs来处理标签上面解析的各种属性

export function processElement (element: ASTElement,options: CompilerOptions
) {// ...省略代码processAttrs(element)return element
}

进入processAttrs这个方法中用于构建抽象的语法树

export const dirRE = process.env.VBIND_PROP_SHORTHAND? /^v-|^@|^:|^\.|^#/: /^v-|^@|^:|^#/
const argRE = /:(.*)$/
function processAttrs (el) {const list = el.attrsListlet i, l, name, rawName, value, modifiers, syncGen, isDynamicfor (i = 0, l = list.length; i < l; i++) {name = rawName = list[i].namevalue = list[i].valueif (dirRE.test(name)) {el.hasBindings = true// modifiers省略代码if (bindRE.test(name)) {// v-bind省略代码} else if (onRE.test(name)) {// v-on省略代码} else {// normal directivesname = name.replace(dirRE, '')// parse arg//先使用dirRE正则表达式把v-model字符串中的v-前缀去掉，//此时name的值就变成了model//它又使用了argRE正则表达式来匹配指令参数//示例 // const template = `<input v-model:value="msg" />`// 匹配到的指令参数//const arg = 'value'const argMatch = name.match(argRE)let arg = argMatch && argMatch[1]isDynamic = falseif (arg) {name = name.slice(0, -(arg.length + 1))if (dynamicArgRE.test(arg)) {arg = arg.slice(1, -1)isDynamic = true}}addDirective(el, name, rawName, value, arg, isDynamic, modifiers, list[i])if (process.env.NODE_ENV !== 'production' && name === 'model') {checkForAliasModel(el, value)}}} else {// ...省略代码}}
}

处理完毕后进入调用addDirective方法，给ast对象添加directives属性

export function addDirective (el: ASTElement,name: string,rawName: string,value: string,arg: ?string,isDynamicArg: boolean,modifiers: ?ASTModifiers,range?: Range
) {(el.directives || (el.directives = [])).push(rangeSetItem({name,rawName,value,arg,isDynamicArg,modifiers}, range))el.plain = false
}

生成的ast树如下所示

const ast = {type: 1,tag: 'input',attrsList: [{ name: 'v-model', value: 'msg' }],attrsMap: {'v-model': 'msg'},directives: [{ name: 'model', rawName: 'v-model', value: 'msg' }]
}

codegen阶段

codegen代码生成阶段，会在genData方法中调用genDirectives来处理指令

export function genData (el: ASTElement, state: CodegenState): string {let data = '{'const dirs = genDirectives(el, state)if (dirs) data += dirs + ','// ...省略代码return data
}function genDirectives (el: ASTElement, state: CodegenState): string | void {const dirs = el.directivesif (!dirs) returnlet res = 'directives:['let hasRuntime = falselet i, l, dir, needRuntimefor (i = 0, l = dirs.length; i < l; i++) {dir = dirs[i]needRuntime = trueconst gen: DirectiveFunction = state.directives[dir.name]if (gen) {// compile-time directive that manipulates AST.// returns true if it also needs a runtime counterpart.needRuntime = !!gen(el, dir, state.warn)}if (needRuntime) {hasRuntime = trueres += `{name:"${dir.name}",rawName:"${dir.rawName}"${dir.value ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}` : ''}${dir.arg ? `,arg:${dir.isDynamicArg ? dir.arg : `"${dir.arg}"`}` : ''}${dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''}},`}}if (hasRuntime) {return res.slice(0, -1) + ']'}
}

与其他指令不同 state.directives，这个属性是在CodegenState类的构造函数中被处理的

export class CodegenState {options: CompilerOptions;warn: Function;transforms: Array<TransformFunction>;dataGenFns: Array<DataGenFunction>;directives: { [key: string]: DirectiveFunction };maybeComponent: (el: ASTElement) => boolean;onceId: number;staticRenderFns: Array<string>;pre: boolean;constructor (options: CompilerOptions) {this.options = options// ...省略代码this.directives = extend(extend({}, baseDirectives), options.directives)// ...省略代码}
}

directives中 v-model中

export default function model (el: ASTElement,dir: ASTDirective,_warn: Function
): ?boolean {warn = _warnconst value = dir.valueconst modifiers = dir.modifiersconst tag = el.tagconst type = el.attrsMap.typeif (process.env.NODE_ENV !== 'production') {// inputs with type="file" are read only and setting the input's// value will throw an error.if (tag === 'input' && type === 'file') {warn(`<${el.tag} v-model="${value}" type="file">:\n` +`File inputs are read only. Use a v-on:change listener instead.`,el.rawAttrsMap['v-model'])}}if (el.component) {genComponentModel(el, value, modifiers)// component v-model doesn't need extra runtimereturn false} else if (tag === 'select') {genSelect(el, value, modifiers)} else if (tag === 'input' && type === 'checkbox') {genCheckboxModel(el, value, modifiers)} else if (tag === 'input' && type === 'radio') {genRadioModel(el, value, modifiers)} else if (tag === 'input' || tag === 'textarea') {genDefaultModel(el, value, modifiers)} else if (!config.isReservedTag(tag)) {genComponentModel(el, value, modifiers)// component v-model doesn't need extra runtimereturn false} else if (process.env.NODE_ENV !== 'production') {warn(`<${el.tag} v-model="${value}">: ` +`v-model is not supported on this element type. ` +'If you are working with contenteditable, it\'s recommended to ' +'wrap a library dedicated for that purpose inside a custom component.',el.rawAttrsMap['v-model'])}// ensure runtime directive metadatareturn true
}

最后代码生成阶段

function genDefaultModel (el: ASTElement,value: string,modifiers: ?ASTModifiers
): ?boolean {// ...省略代码addProp(el, 'value', `(${value})`)addHandler(el, event, code, null, true)// ...省略代码
}

● addProp：调用addProp是为了给ast添加一个value的props属性。
● addHandler：调用addHandler是为了给ast添加一个事件监听，至于到底监听什么事件取决于v-model作用于什么标签。
所以处理之后多了props和events属性

export function genData (el: ASTElement, state: CodegenState): string {let data = '{'// directiveconst dirs = genDirectives(el, state)if (dirs) data += dirs + ','// ...省略代码// DOM propsif (el.props) {data += `domProps:${genProps(el.props)},`}// event handlersif (el.events) {data += `${genHandlers(el.events, false)},`}// ...省略代码return data
}