vue的render的作用和参数,vue3.0 render

　　本文主要介绍了对Vue脚手架中render的理解，非常详细的为大家介绍，对大家的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。

　　在vue的脚手架中，我们会看到入口文件main.js中new Vue的代码中有一个代码render:h=h(app)；

　　这段代码不像我们一般使用vue时的代码。

　　我来写一般的Vue代码。

　　从导入组件./a组件

　　vm=新Vue({

　　埃尔： #app

　　data(){

　　返回{

　　答：“aaa”，

　　乙：“bbb”

　　}

　　},

　　模板：` div

　　span这是一次测试/span

　　组件/组件

　　/div `，

　　组件：{

　　组件

　　}

　　})

　　上面的代码是我们能正常理解的代码。有一个模板，里面可以引入其他组件，但是为什么脚手架里有一个render方法？

　　按照自己的想法，可以把脚手架的代码改一下，看看。

　　启动scaffold，npm运行serve，查看结果，并报告错误。信息如下

　　所以我们可以说，脚手架引入的vue是一个没有模板解析器的vue。如果要解析模板，应该借助render函数。

　　让我们转到项目的node_modules文件夹，看看我们引入了哪个vue。

　　从“vue”导入Vue

　　当我们打开vue/dist的文件时，可以看到很多文件，如图所示。

　　错误说我们有两个解决方案，一个是引入完整的vue.js，一个是使用render。

　　下面介绍一下完整版，看看能不能解决。

　　我们来看第二个，引入vue没有模板解析器，使用render，

　　先说一个渲染。

　　Render是一个带有一个参数的函数，用于创建一个节点。

　　通过console.log我们可以看到参数createElement也是一个函数，它创建了一个VNode的对象。

　　让我们使用箭头功能来简化渲染。

　　渲染(createElement){

　　返回createElement(“h1”，“123”)；

　　}

　　//使用箭头函数来简化

　　render:(createElement)={ return createElement( h1 ， 123)}

　　//箭头函数只有一个参数，不需要写大括号。如果方法体只有一行，就不需要写大括号和返回值。

　　//所以上面的代码可以简化如下

　　render:createElemnet=crement element( h1 ， 123 )

　　//同样，createElement是自定义的，所以我们可以更改名称。

　　render: h=h(h1 ， 123 )

　　//这很像脚手架中的代码

　　h函数，如果是原生html标签，是这样写的。如果是vue的组件，可以直接传入。

　　什么都有。

　　render:h=h(App)

　　render就是这么写的。

　　先说为什么脚手架会引入不完整的vue。

　　我们知道，vue代码完成后，需要对其进行封装，包括vue的核心代码。当我们打包它时，我们实际上不需要解析模板。然后，根本不需要vue核心代码中的模板解析器。所以为了减少代码的大小，vue去掉了模板解析器，但是我们开发的时候又要用到，所以我们创建了一个render方法来解析模板。

　　简而言之，它的目的就是让打包的代码尽可能的小。

　　这就是这篇关于理解Vue搭建中的渲染的文章。更多关于理解Vue render的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。