render函数

92 阅读1分钟

1.vue.js与vue.runtime.xx.js的区别

在下图main.js引入的vue并不是完整的vue.js是vue.runtime.esm.js image.png 在vue.runtime.esm.js文件中加console.log验证一下 image.png 下图证明引入的确实是vue.runtime.esm.js image.png

(1).vue.js是完整版的Vue,包括:核心功能+模板解析器。

在main.js引入完整的vue,如图 image.png hello world就可以被编译解析出来了,也不会报错 image.png

(2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。

改回运行版的vue
image.png

就会报错 image.png

2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容。

image.png

image.png

可以将render函数精简化
image.png

而如果要引入App组件就可以这样写了
image.png

3.那么组件Myschool、Mystudent和App中的template靠什么解析?

靠的就是package.json中的 "devDependencies": "vue-template-compiler"解析 image.png