二、【VUE-CLI】分析脚手架 render

二、分析脚手架 render

1、CODE对比

---

2、改回原版后的运行效果

---

3、听人劝，吃饱饭（不然呢(⇀‸↼‶)）

1、先选第二条路（因为特喵的简单啊）

1、先确定引入的Vue是否残缺

1.

2.

3.

2、引入完整版的Vue

1、CODE

// import Vue from 'vue'
// 引入完整版VUE
import  Vue from 'vue/dist/vue'
import App from './App.vue'

Vue.config.productionTip = false

// new Vue({
//   render: h => h(App),
// }).$mount('#app')
new Vue({
	el:'#app',
	template:`<App></App>`,
	components:{App},
})

2、Result

非常奈斯٩(๑>◡<๑)۶ ~

2、现在走第一条路

1、CODE

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

Vue.config.productionTip = false

// new Vue({
//   render: h => h(App),
// }).$mount('#app')
new Vue({
  	el:'#app',
    // render是什么？渲染函数
    // 谁帮你调用？vue
    // 调用时传递了什么？一个createElement函数
    // createElement能干嘛？创建具体的元素
    // template不写了在render里面写也一样
    // 简写成箭头函数就是脚手架给的原版啦٩(๑>◡<๑)۶ 
  	render(createElement){
    	console.log('@createElement==>', typeof createElement)
    	var ele = createElement(App)
    	return ele
  	}
	// template:`<App></App>`,
	// components:{App},
})

2、Result

跟原来脚手架给出的render简写时一样，依然奈斯(๑╹◡╹)ﾉ"“”

3思考

VUE是不是有什么大冰？放着完整版的Vue不用用残缺版的？

其实不然，完整版Vue.js包含vue核心和模板解析器，其中模板解析器占vue的1/3

正常开发时无所谓，但是打包之后Vue也会被打包进去，打完的包就是已经解析过的文件了，就不再需要模板解析器了，但是由于你使用的就是完整版的Vue所以Vue的模板解析器也给你打进去了，是不是觉得有点不合适啊？

某些机智的小伙伴表示我乐意，我就打，那你就用第二种方法好了，祝你工作愉快~

▼形象化比喻一波：

---

4、关于不同版本的Vue

1. vue.js与vue.runtime.xxx.js的区别
   1. vue.js是完整版的Vue，包含：核心功能+模板解析器
   2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器
2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容