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

时间:2022-06-11

虽然使用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。

image.png


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

image.png



4、打包运行测试

image.png

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



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

(1)上面 render 函数代码,可改为使用箭头函数,并通过$mount 挂载元素,即代码:

image.png

这时实例化 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)。

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






Copyright © 2016 广州思洋文化传播有限公司,保留所有权利。 粤ICP备09033321号

与项目经理交流
扫描二维码
与项目经理交流
ciya68