Shulou(Shulou.com)05/31 Report--

This article focuses on "what is the principle of two-way binding of v-model on Vue components". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the principle of v-model two-way binding on Vue components"?

V-model principle on components

The parse phase of the compilation process of the v-model directive on the component is the same as on the form element (for reference), unlike ordinary form elements in the genCode phase, when the model function is executed to generate code, the genComponentModel function is executed:

V-model compilation phase export default function model (el: ASTElement, dir: ASTDirective, _ warn: Function):? boolean {warn = _ warn / / parse instruction object's value, modifier, tag, type const value = dir.value const modifiers = dir.modifiers const tag = el.tag const type = el.attrsMap.type. } else if (tag = = 'input' | | tag = =' textarea') {/ / this case enters this logic. Let's analyze the genDefaultModel (el, value, modifiers)} else if (! config.isReservedTag (tag)) {/ / unreserved tag, indicating that it is a component node and execute genComponentModel genComponentModel (el, value, modifiers) / / component v-model doesn't need extra runtime return false}. Return true} export function genComponentModel (el: ASTElement, value: string, modifiers:? ASTModifiers):? boolean {/ / parse modifier const {number, trim} = modifiers | | {} const baseValueExpression ='$v' let valueExpression = baseValueExpression / / enter the following logic Generate the value expression if (trim) {valueExpression = `(typeof ${baseValueExpression} = 'string'` + `? ${baseValueExpression} .trim ()` + `: ${baseValueExpression})`} / / with the number modifier, generate the following expression if (number) {valueExpression = `_ n (${valueExpression})`} / / parse value After generating the parsed expression const assignment = genAssignmentCode (value, valueExpression) / / AST element mounts the model object el.model = {value: `(${value})`, expression: `"${value}"`, callback: `function (${baseValueExpression}) {${assignment}`}}

You can see that after the component executes the genDirectives parsing model instruction, it generates a model object on the AST element node, which is different from normal form elements. The v-model of the component has a piece of logic after executing the genDirectives during the genCode process, as follows:

Export function genData (el: ASTElement, state: CodegenState): string {let data ='{'/ directives may mutate the el's other properties before they are generated. / / parse the model instruction const dirs = genDirectives (el, state) if (dirs) data + = dirs +','. / / component v-model / / v-model on the component, enter the logic, concatenate and generate the following code string if (el.model) {data + = `model: {value:$ {el.model.value}, callback:$ {el.model.callback}, expression:$ {el.model.expression}}, `}

It is not until this time that the final code string is generated.

Export function createComponent (Ctor: Class | Function | Object | void, data:? VNodeData, context: Component, children:? Array, tag?: string): VNode | Array | void {/... / transform component v-model data into props & events / / if there is model attribute if (isDef (data.model)) {/ / call transformModel on data The parameter passed in is the options configuration item transformModel (Ctor.options, data)} / / of the component constructor. Const vnode = new VNode (`vue-component-$ {Ctor.cid} ${name? `- ${name}`:''} `, data, undefined, context, {Ctor, propsData, listeners, tag, children}, asyncFactory) return vnode}

When creating a component, there is the above logic that when it is analyzed that there is a model object on the node, the transformModel function will be called to convert the v-model object:

/ / transform component v-model info (value and callback) into// prop and event handler respectively.function transformModel (options, data: any) {/ / find the prop attribute const prop = (options.model & & options.model.prop) on model | | 'value' / / find the event event const event = (options.model & & options.model.event) on model |' input' / / add the prop attribute value to the props attribute object of data (data.props | | (data.props = {})) [prop] = data.model.value / / add the event event const on = data.on to the on property object of data | (data.on = {}) if (isDef (on [event])) {on [event] = [data.model.callback] .concat (on[ even t])} else {on [event] = data.model.callback}}

You can see that the model object generated during compilation is eventually parsed into value properties and input events, which are extended to the options configuration item of the component constructor.

As you can see above, the essence of the v-model instruction on the component is that the value attribute and input event are also generated.

At this point, I believe you have a deeper understanding of "what is the principle of v-model two-way binding on Vue components". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.