Vueテンプレート構文template VS Vueレンダリング関数render

1158 ワード

一、vueテンプレート構文(template)
1つのtemplateテンプレートは、vueのインスタンス化からページに表示されるまで、どのような過程を経ているのか、分析してみましょう.
次の例を示します.
new Vue({
    el:'#app',
    template:'

hello world

' })

vueテンプレート構文解釈器vue-template-compiler、vue-template-compilerはどんな役割を果たしていますか?
主にテンプレート(template)を仮想domレンダリング関数(render)にコンパイルします.
主に3つのステップがあります.
1,parser:テンプレート解釈器、templateテンプレートをAST(abstract syntac tree)抽象構文ツリーに変換します.
2,optimizer:ASTオプティマイザ、繰り返しレンダリングに静的に関与しないテンプレートクリップを処理します.
3,codegen:コードジェネレータ,ASTに基づいてJavaScript仮想domレンダリング関数を生成し,実行時に実行を遅らせ,HTMLを生成する.
二、vueレンダリング関数(render)
vueレンダリング関数は、vueテンプレートを使用するよりも、vueインスタンス化からページに表示するまでのプロセスが簡単です.レンダリング関数が実行される結果、仮想domオブジェクトが直接生成されるためです.
次の例を示します.
new Vue({
el:'#app',
render:h=>h('h3','hello wrold')
})

vueレンダリング関数を使用するには、テンプレート解析、AST最適化、コード生成の3つのステップを必要としないため、vueを使用するレンダリング関数は、vueテンプレートを使用するよりも文法的に優れています.
 
参照先:
vue template compilerテンプレート解析モジュールソースコード解析
https://blog.csdn.net/u014787301/article/details/85842963
理解vue-loader
https://www.cnblogs.com/Sherlock09/p/11023593.html