关于render函数

2022-02-28 02:01:17 阅读：181 来源： 互联网

标签：Vue 函数 render App 关于 createElement mount

在看尚硅谷的Vue课程的时候，发现他们初始化的项目中main.js中存在一段与自己创建不太一样的代码

//视频中的
new Vue({
  render: h => h(App)
}).$mount('#app')

//自己创建的  vue-cil 版本是2.9.6
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

render在这里指的是渲染

这里的代码是使用了ES6 语法，若将其完整写出来则是

render: h => h(App)

//完整写法
render: function(h) {
    return h(App)
  }

而这里的 h 其实是替换了 createElement 这个名称，根据Vue.js 作者 Even You 的回复，这里的h来自术语"hyperscript"

即上面的完整写法又可以写成

render: function (createElement) {
    return createElement(App);
}

这个render函数接收了一个createElement函数作为参数。

简单说，render函数在这里的功能是将createElement(App)中的App所含的模板渲染到页面上去。

这个render函数就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。

借助一位博主的图以方便理解render的一些功能（来源：Vue render函数）

本文参考：

render: h => h(App) $mount 什么意思

关于Vue中 render: h => h(App) 的具体含义的理解

Vue render函数

标签：Vue,函数,render,App,关于,createElement,mount
来源： https://www.cnblogs.com/66-RAKU/p/15944060.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

关于render函数