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、代码量更少