vue解析テンプレートの解釈

866 ワード

vue解析テンプレートの解釈
vueソースコードを表示することにより、仮想dom、仮想domの構築にはtemplateをAST構文ツリーに解析し、render関数に変換し、最後にvnode仮想domノードを返す必要があることが分かった.
ASTとは?
VUEのmountプロセスではtemplateがAST構文ツリーにコンパイルされ、ASTは抽象構文ツリー、または構文ツリーを指し、ソースコードの抽象構文構造のツリー表現形式を指す
解析の例
テンプレートをASTに解析する

{{name}}


上のテンプレートを解析すると、次のようになります.
{
  tag: "div"
  type: 1,
  staticRoot: false,
  static: false,
  plain: true,
  parent: undefined,
  attrsList: [],
  attrsMap: {},
  children: [
    {
      tag: "p"
      type: 1,
      staticRoot: false,
      static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
        type: 2,
        text: "{{name}}",
        static: false,
        expression: "_s(name)"
      }]
    }
  ]
}