在vue-cli脚手架中的main.js中&＃xff0c;模板渲染没有使用teplate进行渲染&＃xff0c;而是使用render进行渲染&＃xff0c;这是为什么呢&＃xff1f;render函数有什么作用吗&＃xff1f;

实例展示&＃xff1a;

解释&＃xff1a;

• 没有使用template是因为使用的是vue.runtime.esm.js这个残缺版的文件&＃xff0c;没有使用完整版&＃xff08;vue.js&＃xff09;,残缺版的文件没有模板解析这个功能&＃xff0c;但是由于他体积较小&＃xff0c;运行较快&＃xff0c;所以vue-cli官方选择特作为默认的vue文件进行引入。
• render函数的作用就是将App组件解析到模板中&＃xff0c;使用render方法&＃xff0c;就可以代替components &＃43; template.

方法剖析&＃xff1a;
render: h &＃61;> h(App)对于这句代码&＃xff0c;我们来彻底理解一下
绿色箭头是vue/cli自动生成的&＃xff0c;红色箭头是完整写法。

render是一个属性&＃xff0c;属性值是一个函数&＃xff0c;函数的参数又是一个函数&＃xff0c;他可以创造一个标签&＃xff0c;并且为这个标签添加内容。如图片中&＃xff0c;创造了一个

最后&＃xff1a;使用es6语法简写形式&＃xff0c;以及箭头函数的用法。就演变为默认样式