持续改进——采用 render 函数渲染组

虽然使用vue.js完成版可以编译，但是对于企业建设网站来讲它太大了，浪费性能，所以我们依旧使用默认的运行时版本，将编译任务交给 vue-loader 加载器，vue运行时只需要负责渲染功能就行。

之前引入组件都是使用template ，但是template 自身没有渲染功能，最终渲染底层都是通过 render 函数实现的，但我们又要把 template 属性编译成 render 函数，编译过程有一定的性能损耗。所以可以直接使用运行时版本 vue ，然后直接通过render 函数来渲染组件即可。

1、总结2 种解决子组件内容没有渲染出来的方案

（1）vue 完整版比运行时 版本大，性能不如运行时版本 vue。

（2）官方更推荐运行时版本 vue，因为 vue-loader 可以编

译 .vue 文件，所以是不需要 vue 的编译功能的，只需要渲染功能即可。

（3）前面都是通过 template 属性引入组件，而 template 自

身没有渲染功能，最终渲染底层都是通过 render 函数实现的。因此需要把 template 属性编译成 render 函数，这个编译过程有一定的性能损耗。

因此，最佳方案是：

使用运行时版本 vue ，然后直接通过render 函数来渲染组件即可

2、改进 main.js

企业网站设计，品牌网站建设, 通过 template 属性导入 App 组件，改为直接通过 render 函数渲染。此外，通过 render 函数进行渲染组件，注册组件都可以不需要，因为通过作为 h 函数的参数，默认就是子组件。改动的代码如下最后的render。

3、注释掉 main.js 中的下面的引入完整版的 vue.js 代码

4、打包运行测试

浏览 dist/index.htm，结果没问题。

5、采用箭头函数优化下 render 函数

（1）上面 render 函数代码，可改为使用箭头函数，并通过$mount 挂载元素,即代码：

这时实例化 vue 代码实际上很简单，如下。含义可以这么理解：渲染子组件 App（相对 new Vue 这个 根组件）到 index.html 文件指定的 app 处。（如果要问为什么是渲染到 index.html 文件的 app处，因为在 webpack.config.js 中配置好了要打包的模板文件为main.js，而 main.js 中又引用了 App.vue 及 vue.js，所以实质就是把 main.js 和 App.vue 及 vue 一起打包到 bundle.js 文件中（如果还有引入/依赖了其他组件都会被一起打包的），同时打包后的bundle.js 文件被引入到 index.html 文件中【实际上可以这么理解这些组件和 index.html 组合在一起去了】，而这个时候在 bundel.js 中

指定的 app 就是当前文件 index.html 中的 app）。

强调一点：如果子组件还引入其他组件（即是组件依赖的组件），那么打包时会层层打包到各个依赖组件（根据依赖关系都会打包）。