二、vuecli创建项目时runTimeCompiler与runTimeOnly的区别，及一步步演变

1.先看两种模式创建出来min.js文件的区别

---

2.怎么将runTimeCompiler一步步转成runTimeOnly

• # 普通写法

// runTimeCompiler创建的版本

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

Vue.config.productionTip = false

/* eslint-disable no-new */

//------1、直接注释原代码------

// new Vue({
//   el: '#app',
//   components: { App },
//   template: '<App/>'
// })

// -----2、重新写-----

new Vue({
  el:'#app',
  render:(createElement)=>{
    // -----一、-----
    return createElement('h2',{class:'box'},["Hello Vue-Cli"]);

  }
}) 


// 区别:
// runtime-compiler
// template -->  ast --> render --> vdom --> UI

// runtime-only (1.性能更高、2.代码更少、3.直接将template转成ast这一步省略了)
// render --> vdom --> UI

这样就会创建一个class为box的h2标签替换index.html的div id等于app的元素
效果图：

同时，我们还可以继续加一个button按钮，

new Vue({
  el:'#app',
  render:(createElement)=>{
    // -----一、-----
    return createElement('h2',
    {class:'box'},
    ["Hello Vue-Cli",createElement('button',{class:'btn'},['按钮'])]);

  }
}) 

效果图：

---

• # 传入组件对象

// runTimeCompiler创建的版本

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

Vue.config.productionTip = false


//------1、直接注释原代码------

// new Vue({
//   el: '#app',
//   components: { App },
//   template: '<App/>'
// })

// -----2、重新写-----

const cpn={
  template:'<div>{{message}}</div>',
  data(){
    return {
      message:"组件化写法！"
    }
  }
}

new Vue({
  el:'#app',
  render:(createElement)=>{
    // -----一、----- 普通写法
    // return createElement('h2',
    // {class:'box'},
    // ["Hello Vue-Cli",createElement('button',{class:'btn'},['按钮'])]);

    // -----二、-----直接传一个组件
    return createElement(cpn)


  }
}) 


// 区别:
// runtime-compiler
// template -->  ast --> render --> vdom --> UI

// runtime-only (1.性能更高、2.代码更少、3.直接将template转成ast这一步省略了)
// render --> vdom --> UI

效果图：

---

既然可以传一个对象，那么直接把对象提取成一个组件通过import导入，类似App.vue的文件，就可以了

传入App组件 改写完成

// runTimeCompiler创建的版本

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

Vue.config.productionTip = false

/* eslint-disable no-new */

//------1、直接注释原代码------

// new Vue({
//   el: '#app',
//   components: { App },
//   template: '<App/>'
// })

// -----2、重新写-----

new Vue({
  el:'#app',
  render:(createElement)=>{
    // -----一、----- 普通写法
    // return createElement('h2',
    // {class:'box'},
    // ["Hello Vue-Cli",createElement('button',{class:'btn'},['按钮'])]);

    // -----二、-----直接传一个组件
    return createElement(App)
    
  }
}) 


// 区别:
// runtime-compiler
// template -->  ast --> render --> vdom --> UI

// runtime-only (1.性能更高、2.代码更少、3.直接将template转成ast这一步省略了)
// render --> vdom --> UI

效果图：