如何理解vue中的v-bind？

如果你写过vue，对v-bind这个指令一定不陌生。 下面我将从源码层面去带大家剖析一下v-bind背后的原理。

会从以下几个方面去探索：

v-bind关键源码分析
v-bind化的属性统一存储在哪里：attrsMap与attrsList
绑定属性获取函数 getBindingAttr 和 属性操作函数 getAndRemoveAttr
v-bind如何处理不同的绑定属性
v-bind:key源码分析
v-bind:title源码分析
v-bind:class源码分析
v-bind:style源码分析
v-bind:text-content.prop源码分析
v-bind的修饰符.camel .sync源码分析
v-bind关键源码分析
v-bind化的属性统一存储在哪里：attrsMap与attrsList

<p v-bind:title="vBindTitle"></p>
复制代码

假设为p标签v-bind化了title属性，我们来分析title属性在vue中是如何被处理的。

vue在拿到这个html标签之后，处理title属性，会做以下几步：

解析HTML，解析出属性集合attrs，在start回调中返回
在start回调中创建ASTElement，createASTElement(… ,attrs, …)
创建后ASTElement会生成attrsList和attrsMap
至于创建之后是如何处理v-bind:title这种普通的属性值的，可以在下文的v-bind:src源码分析中一探究竟。

解析HTML，解析出属性集合attrs，在start回调中返回

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) {
   
      // 在这里上传到start函数
      options.start(tagName, attrs, unary, match.start, match.end)
    }
  }
复制代码

在start回调中创建ASTElement，createASTElement(… ,attrs, …)

// 解析HMTL
parseHTML(template, {
   
    ...
    start(tag, attrs, unary, start, end) {
   
        let element: ASTElement = createASTElement(tag, attrs, currentParent) // 注意此处的attrs
    }
})
复制代码

创建后ASTElement会生成attrsList和attrsMap

// 创建AST元素
export function createASTElement (
  tag: string,
  attrs: Array<ASTAttr>, // 属性对象数组
  parent: ASTElement | void // 父元素也是ASTElement
): ASTElement {
    // 返回的也是ASTElement
  return {
   
    type: 1,
    tag,
    attrsList: attrs,
    attrsMap: makeAttrsMap(attrs),
    rawAttrsMap: {
   },
    parent,
    children: []
  }
}
复制代码

attrs的数据类型定义

// 声明一个ASTAttr 属性抽象语法树对象 数据类型
declare type ASTAttr = {
   
  name: string; // 属性名
  value: any; // 属性值
  dynamic?