vue 记录

Parse 后形成的节点类型

元素节点

元素节点

const elementNode = {
    type: NodeTypes.ELEMENT,  // 1
    ns,
    tag,
    tagType, ElEMENT/SLOT/TEMPLATE/COMPONENT
    props,
    isSelfClosing,
    children: [],
    loc,
    codegenNode,
}

注释节点

const commentNode = {
    type: NodeTypes.COMMENT,
    contnet,
    loc
}

文本节点

const textNode = {
    type: NodeTypes.TEXT,
    constent,
    loc
}

插值节点

const interpolationNode = {
    type: NodeTYpes.INTERPOLATION,
    constent: {
        type: NodeTypes.SIMPLE_EXPRESSION,
        isStatic: false,
        constType: ConstantTypes.NOT_CONSTANT,
        constent,
        loc
    },
    loc
}

属性形成的节点

非指令属性

const attributeNode = {
    type: NodeTypes.ATTREIBUTE,
    name,
    value: value && {
        type: NodeTypes.TEXT,
        content: value.content,
        loc
    },
    loc
}

指令属性

const directiveNode = {
    type: NodeTypes.DIRECTIVE,
    name: dirName, // on bind...
    exp: value && {
        type:NodeTypes.SIMPLE_EXPRESSION,
        content: value.content,
        isStatic: false,
        constType: ConstantTypes.NOT_CONSTANT,
        loc
    },
    arg,
    modifiers,
    loc
}

指令属性的 arg

const argNode = {
    type: NodeTypes.SIMPLE_EXPRESSION,
    constent,
    isStatic, // 动态是 false，反之 true,
    constType: isStatic
          ? ConstantTypes.CAN_STRINGIFY
          : ConstantTypes.NOT_CONSTANT,
    loc
}

指令属性的 modifiers

const modifiersNode = ['prop']

属性的 value

const value = {
    content,
    isQuoted,
    loc
}

属性经过转换后的样子

属性的处理会形成一个对象表达式。

特殊属性

对于在 v-for 指令中出现的 ref 指令，会在元素上附加一个 ref-for=true 的属性。

非指令属性

非指令属性处理相对简单，直接相乘