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