This is the 14th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The V-Model is essentially a syntactic sugar in any usage scenario.

V-models are inseparable from forms, and the reason a view can affect data is that the view essentially needs to be interactive, so forms are a prerequisite for this interaction. 

// Plain input box <input type="text" V-model ="value1"> // Multi-line text box <textarea V-model ="value2" cols="30" rows="10"></textarea> // single box  <div class="group"> <input type="radio" value="one" v-model="value3"> one <input type="radio" value="two" V-model ="value3"> two </div> The writing method of native radio boxes requires binding a group of radio boxes by name. The name attribute of the two radio boxes is the same. <div class="group"> <input type="radio" name="number" value="one">one <input type="radio" name="number" Value ="two">two </div> []) <div class="group"> <input type="checkbox" value="jack" v-model="value4">jack <input type="checkbox" value="lili" V-model ="value4">lili </div> // dropdown options <select name="" id="" V-model ="value5"> <option value="apple">apple</option> <option value="banana">banana</option> <option value="bear">bear</option> </select>Copy the code

For the next analysis, we take the ordinary input box as an example:

<div id="app">
  <input type="text" v-model="value1">
</div>

new Vue({
  el: '#app',
  data() {
    return {
      value1: ''
    }
  }
})
Copy the code

Review the template to the real node before entering the body.

  1. Template resolution intoASTTree;
  2. ASTThe tree generates executablerenderFunctions;
  3. renderFunction conversion toVnodeObject;
  4. According to theVnodeObject generates trueDomNode.

Next, let’s take a look at parsing templates into AST trees.

AST tree parsing

Parse (template.trim(), options); var ast = parse(template.trim(), options); The processAttrs function.

As anyone who has used VUE to write templates knows, vUE template attributes are made up of two parts, one is an instruction, the other is a normal HTML tag attribute. Z These are also the two main branches of property processing. In the domain of instruction subdivision, v-ON and V-bind are used for special processing, and other ordinary branches perform addDirective.

Function processAttrs(el) {var list = el.attrslist; var i, l, name, rawName, value, modifiers, syncGen, isDynamic; for (i = 0, l = list.length; i < l; i++) { name = rawName = list[i].name; // v-on:click value = list[i].value; // doThis if (dirRE.test(name)) { // 1. ··· if(bindre.test (name)) {// v-bind branch ···} else if(onre.test (name)) {// V-on branch ···} else {// v-bind, Directives beyond THE V - ON... // The directives add the CACHE attribute addDirective(EL, name, rawName, value, ARG, isDynamic, MODIFIERS, list[I]) to the AST tree;  if (name === 'model') { checkForAliasModel(el, value); }}} else {// 2. Normal HTML tag attributes}}}Copy the code

In the section of uncovering the event mechanism, we introduced that the EVENT instruction V-ON is processed in the AST generation phase by adding events attributes to the AST tree. Similarly, the directives add the directives property to the AST tree. For details, see the addDirective function.

/ / add directives attribute function addDirective (el, name, rawName, value, arg, isDynamicArg, modifiers, range) {(el. Directives | | (el.directives = [])).push(rangeSetItem({ name: name, rawName: rawName, value: value, arg: arg, isDynamicArg: isDynamicArg, modifiers: modifiers }, range)); el.plain = false; }Copy the code

The AST tree ended up with a property object where modifiers represent modifiers added to templates such as.lazy,.number,.trim.

// AST
{
  directives: {
    {
      rawName: 'v-model',
      value: 'value',
      name: 'v-model',
      modifiers: undefined
    }
  }
}

Copy the code