違いは、ランタイム・コンパイラとランタイムのみのモードを選択するとmain.js異なるファイル

二.vue実行中のプロセス

1.分析：

最初のステップは、VUEテンプレートの場合、テンプレート Vueのインスタンスを通過し、内部VUEの中に保存されるオプションの第二の部分の内側に、構文解析、に解決AST（抽象構文木）、第三の工程はコンパイルされ、コンパイルされたレンダリング関数は、第四のステップは、関数が生成レンダリング仮想DOMツリー、第五工程、でレンダリング仮想DOMツリー真のDOM UIを

したがって：ステップランタイム・コンパイラがある- > AST - >レンダリング- > VDOM - > UIテンプレート、実行時のみの段階で レンダリング- > VDOMは- > UIは、明らかに高いパフォーマンスランタイムのみの、符号量が多いですレス

三つは、関数が詳細なレンダリング

1.render機能の役割

ページを作成するためのテンプレートを使用しているときVUE、あなたは仮想DOMツリーを作成するために、レンダリング機能を渡す必要があり、この関数は、関数をレンダリングすることです。内部関数をレンダリングするには、コールバック関数取るのcreateElement（） 、この役割の機能は、VNODEノード（仮想DOM）を生成Vue.jsマウントに戻っVNODEノード機能を作成した後）（のcreateElementを取得する機能をレンダリングすることであり、実際のDOMにレンダリングをノード、およびルートノードにマウントします。

使用2.render機能

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
const cpn = {
  template: '<div>{{message}}</div>',
  data () {
    return {
      message: '我是组件的message'
    }
  }
}
new Vue({
  el: '#app',
  // components: { App },
  // template: '<App/>'
  render: function (creatElement) { //回调函数creatElement
    //1.普通用法：creatElement('标签名',{标签属性}, ['标签里面显示的内容'])
    return creatElement ('h2',
    {class: 'box'}, 
    ['hello vue'])
    //2.传入组件
    return creatElement (cpn)
    //这种写法的好处：
    //如果把cpn传给template的话它还要编译成ast，这种写法的话直接让render函数生成虚拟dom，效率更高
  }
})

3.思考：.vue文件里面的template是由谁处理的？

是由vue-tempalte-compiler解析

import Vue from 'vue'
import App from './App.vue'


Vue.config.productionTip = false

console.log(App)
//不包含任何template函数,而是一个render函数
new Vue({
  render: h => h(App),
}).$mount('#app')

打印这段代码，结果如下：

疑惑：

Runtime-Compiler创建的项目打印出来的结果也是这样，为什么，难道打印之前内部已经解析好了？

ランタイム・コンパイラとランタイムのみのでVueの違い