什么是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
}

總結

其實學源碼學到后續感覺有點懵 然后就是復習js 感覺紅寶書講的挺多的 馬上也要期末考試了 希望期末平穩度過。