Understanding v-bind in vue

1. Analysis of key source code of v-bind

1. Where are v-bind attributes stored uniformly: attrsMap and attrsList

<p v-bind:title="vBindTitle"></p>

Assuming that the title attribute is v-bind for the p tag, let's analyze how title attribute is processed in vue .

After getting this HTML tag, Vue processes the title attribute and does the following steps:

• Parse HTML , parse out the attribute set attrs , and return it in start callback
• Create ASTElement，createASTElement(... ,attrs, ...)

• After creation, ASTElement will generate attrsList and attrsMap
  

As for how to handle common attribute values ​​such as v-bind:title after creation, you can find out more in the v-bind:src source code analysis below.

2. Parse HTML, parse the attribute set attrs, and return it in the start callback

 
  function handleStartTag (match) {
    ...
    const l = match.attrs.length
    const attrs = new Array(l)
    for (let i = 0; i < l; i++) {
      const args = match.attrs[i]
      ...
      attrs[i] = {
        name: args[1],
        value: decodeAttr(value, shouldDecodeNewlines)
      }
    }
   ...
    if (options.start) {
      // Upload to the start function here options.start(tagName, attrs, unary, match.start, match.end)
    }
  }

3. Create ASTElement in the start callback, createASTElement(... ,attrs, ...)

// Parsing HMTL
parseHTML(template, {
    ...
    start(tag, attrs, unary, start, end) {
        let element: ASTElement = createASTElement(tag, attrs, currentParent) // Note the attrs here
    }
})

4. After creation, ASTElement will generate attrsList and attrsMap

// Create AST element export function createASTElement (
  tag: string,
  attrs: Array<ASTAttr>, // attribute object array parent: ASTElement | void // parent element is also ASTElement
): ASTElement { // Returns ASTElement
  return {
    type: 1,
    tag,
    attrsList: attrs,
    attrsMap: makeAttrsMap(attrs),
    rawAttrsMap: {},
    parent,
    children: []
  }
}

5. Data type definition of attrs

//Declare an ASTAttr attribute abstract syntax tree object data type declare type ASTAttr = {
  name: string; // attribute namevalue: any; // attribute valuedynamic?: boolean; // is it a dynamic attributestart?: number;
  end?: number
};

6. Binding attribute acquisition function

Binding attribute acquisition function getBindingAttr and attribute operation function getAndRemoveAttr

getBindingAttr and its sub-function getAndRemoveAttr are very useful for handling的v-bind specific scenarios, that is, the "How v-bind handles different binding attributes" section is very useful. They are listed here for reference in the following v-bind:key source code analysis; v-bind:src source code analysis; v-bind:class source code analysis ;v-bind:style source code analysis; v-bind:dataset.prop source code analysis.

export function getBindingAttr (
  el: ASTElement,
  name: string,
  getStatic?: boolean
): ?string {
  const dynamicValue =
    getAndRemoveAttr(el, ':' + name) ||
    getAndRemoveAttr(el, 'v-bind:' + name)
  if (dynamicValue != null) {
    return parseFilters(dynamicValue)
  } else if (getStatic !== false) {
    const staticValue = getAndRemoveAttr(el, name)
    if (staticValue != null) {
      return JSON.stringify(staticValue)
    }
  }
}

// note: this only removes the attr from the Array (attrsList) so that it
// doesn't get processed by processAttrs.
// By default it does NOT remove it from the map (attrsMap) because the map is
// needed during codegen.
export function getAndRemoveAttr (
  el: ASTElement,
  name: string,
  removeFromMap?: boolean
): ?string {
  let val
  if ((val = el.attrsMap[name]) != null) {
    const list = el.attrsList
    for (let i = 0, l = list.length; i < l; i++) {
      if (list[i].name === name) {
        list.splice(i, 1) // Remove an attribute from attrsList, will not remove break from attrsMap
      }
    }
  }
  if (removeFromMap) {
    delete el.attrsMap[name]
  }
  return val
}

2. How to get the value of v-bind

Take the following code as an example to analyze how vue obtains the value of v-bind from the source code.

I will analyze it by writing down a few scenes:

• Common key attributes
• Bind a common html attribute：title

• Binding class and style
• Bind an html DOM property：textContent


vBind:{
    key: +new Date(),
    title: "This is a HTML attribute v-bind",
    class: "{ borderRadius: isBorderRadius }"
    style: "{ minHeight: 100 + 'px' , maxHeight}"
    text-content: "hello vue v-bind"
}

<div
   v-bind:key="vBind.key"
   v-bind:title="vBind.title"
   v-bind:class="vBind.class"
   v-bind:style="vBind.style"
   v-bind:text-content.prop="vBind.textContent"
 />
</div>

1. v-bind:key source code analysis

function processKey (el) {
  const exp = getBindingAttr(el, 'key')
   if(exp){
      ...
      el.key = exp;
   }
}

The getBindingAttr function is used in processKey function. Since we use v-bind and not :, const dynamicValue = getAndRemoveAttr(el, 'v-bind:'+'key') ;, getAndRemoveAttr(el, 'v-bind:key') function goes to attrsMap to determine whether 'v-bind:key' exists, takes the value of this attribute as val and deletes it from attrsList , but does not delete it from attrsMap , and finally uses the value of 'v-bind:key' , that is, val, as dynamicValue , and then returns the result of parsing and filtering, and finally set the result as key property of the element in processKey . Then it is stored in segments . As for what segments are, you can see it in the source code above.

2. v-bind:title source code analysis

title is a "non- vue special" and ordinary HTML attribute .

function processAttrs(el){
     const list = el.attrsList;
     ...
     if (bindRE.test(name)) { // v-bind
        name = name.replace(bindRE, '')
        value = parseFilters(value)
        ...
        addAttr(el, name, value, list[i], ...)
      }
}
export const bindRE = /^:|^\.|^v-bind:/
export function addAttr(el: ASTElement, name: string, value: any, range?: Range, dynamic?: boolean) {
  const attrs = dynamic
    ? (el.dynamicAttrs || (el.dynamicAttrs = []))
    : (el.attrs || (el.attrs = []))
  attrs.push(rangeSetItem({ name, value, dynamic }, range))
  el.plain = false
}

By reading the source code, we can see that for native attributes, such as title, vue will first parse name and value , and then make a series of judgments on whether there are modifiers ( modifier part will be explained in detail below), and finally update attrs of ASTElement , so that attrsList and attrsMap are also updated synchronously.

3. v-bind:class source code analysis

css class is a very important layer in the presentation of front-end development. Therefore, vue also does a lot of special processing for class attributes.

function transformNode (el: ASTElement, options: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticClass = getAndRemoveAttr(el, 'class')
  if (staticClass) {
    el.staticClass = JSON.stringify(staticClass)
  }
  const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
  if (classBinding) {
    el.classBinding = classBinding
  }
}

In the transfromNode function, the static class is obtained through getAndRemoveAttr , that is, class="foo"; the bound class is obtained in getBindingAttr , that is, v-bind:class="vBind.class " or v-bind:class="{ borderRadius: isBorderRadius }", and the classBinding of ASTElement is assigned to the attribute we bound for subsequent use.

4. v-bind:style source code analysis

Style is an HTML attribute that directly manipulates styles, second only to mportant and more intuitive than class. Vue also makes special treatment for this attribute.

function transformNode (el: ASTElement, options: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticStyle = getAndRemoveAttr(el, 'style')
  if (staticStyle) {
    el.staticStyle = JSON.stringify(parseStyleText(staticStyle))
  }
  const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
  if (styleBinding) {
    el.styleBinding = styleBinding
  }
}

In the transfromNode function, the static style is obtained through getAndRemoveAttr , that is, style="{fontSize: '12px' }"; the bound style is obtained in getBindingAttr , that is, v-bind:style="vBind.style"即v-bind:class={ minHeight: 100 + 'px' , maxHeight }", where maxHeight is a variable, and styleBinding of ASTElement is assigned to the attribute we bound for subsequent use.

5. v-bind:text-content.prop source code analysis

textContent is a native property of the DOM object, so it can be identified by prop. If we want to set a DOM prop directly through vue, we can make modifications on the DOM node.

Let's look at the source code.

function processAttrs(el) {
  const list = el.attrsList
  ...
  if (bindRE.test(name)) { // v-bind
      if (modifiers) {
          if (modifiers.prop && !isDynamic) {
            name = camelize(name)
            if (name === 'innerHtml') name = 'innerHTML'
          }
       }
       if (modifiers && modifiers.prop) {
          addProp(el, name, value, list[i], isDynamic)
        }
   }
}
export function addProp (el: ASTElement, name: string, value: string, range?: Range, dynamic?: boolean) {
  (el.props || (el.props = [])).push(rangeSetItem({ name, value, dynamic }, range))
  el.plain = false
}
props?: Array<ASTAttr>;

From the source code above, we can see that text-content in v-bind:text-content.prop is first camel-cased textContent (this is because DOM property are all in camelCase format). Vue also makes compatibility with the incorrect writing innerHtml , and then adds the textContent attribute to ASTElement的props through the prop identifier, and the props here is essentially an ASTAttr.

There is a question worth pondering: Why do this? What are the similarities and differences with HTML attributes?

• There is no HTML attribute that can directly modify the text content of the DOM, so it needs to be marked separately
• It is faster than manually updating DOM text nodes through js, eliminating the steps of querying DOM and then replacing text content.
• You can see which attribute we have v-binded on the label, which is very intuitive
• In fact, v-bind:title can be understood as v-bind:title.attr，v-bind:text-content.prop is just that vue defaults to HTML attribute without modifiers.

6. v-bind modifier.camel.sync source code analysis

. camel is just camelCase, simple. But .sync is not that simple, it expands into a v-on listener that updates the bound value of the parent component.

In fact, I was confused when I first saw the .sync modifier, but after reading the component's .sync carefully and combining it with actual work, I found its power.

<Parent
  v-bind:foo="parent.foo"
  v-on:updateFoo="parent.foo = $event"
></Parent>

In Vue, props passed from the parent component to the child component cannot be modified directly by the child component through this.props.foo = newFoo . Unless we this.$emit("updateFoo", newFoo)， and then use v-on in the parent component to listen to updateFoo event. If you want better readability, you can change the name of $emit to update:foo, and then v-on:update:foo .

Is there a more concise way to write it? ? ? That's what we have here, the .sync operator. It can be shortened to:

<Parent v-bind:foo.sync="parent.foo"></Parent>

Then trigger it in the child component through this.$emit("update:foo", newFoo );. Note that the event name here must be in the format of update:xxx, because in the source code of Vue, using the .sync modifier attribute will automatically generate a v-on:update:xxx listener.

Let's look at the source code:

if (modifiers.camel && !isDynamic) {
  name = camelize(name)
}
if (modifiers.sync) {
  syncGen = genAssignmentCode(value, `$event`)
  if (!isDynamic) {
    addHandler(el,`update:${camelize(name)}`,syncGen,null,false,warn,list[i]) 
   // Hyphenate is a hyphenation function, where camelize is a camel case function if (hyphenate(name) !== camelize(name)) {
      addHandler(el,`update:${hyphenate(name)}`,syncGen,null,false,warn,list[i])
    }
  } else {
    // handler w/ dynamic event name
    addHandler(el,`"update:"+(${name})`,syncGen,null,false,warn,list[i],true)
  }
}

By reading the source code, we can see that: For the attributes of v-bind:foo.sync , Vue will determine whether the attribute is a dynamic attribute. If it is not a dynamic property, first add a camelCase listener to it, and then add a hyphenated listener to it, for example v-bind:foo-bar.sync , first v-on:update:fooBar , then v-on:update:foo-bar . The v-on listener is added via addHandle . If it is a dynamic attribute, it will not be camelCase or hyphenated. Through addHandler(el,update:${name}, ...)， the event of the dynamic attribute will be listened to honestly.

To summarize sync in one sentence: sync is a syntax sugar that simplifies v-bind and v-on to v-bind.sync and this.$emit('update:xxx' ). It provides a way for a child component to quickly update the parent component data.

This is the end of this article about understanding v-bind in vue. For more relevant content about v-bind in vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!