vue中的runtime+compiler 和 runtime-only

1、runtime+compile：

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//template -->ast(abstract syntax tree:抽象語法數)-->render函數 --> vdom(virtual 虛擬dom) -->UI

 

2、runtime-only：

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  render:h=>h(App)
})

//render函數 --> vdom(virtual 虛擬dom) -->UI

 

3、runtime+compiler 和 runtime-only的區別

runtime+compiler 和 runtime-only的區別:只在main.js 不同

runtime+compiler：template -->ast(abstract syntax tree:抽象語法數)-->render函數 --> vdom(virtual 虛擬dom) -->UI

runtime-only：render函數 --> vdom(virtual 虛擬dom) -->UI

比較：

runtime-only 1、性能更高,因為不需要 ，template -->ast(abstract syntax tree:抽象語法數)這兩步，2、代碼量更少