Java教程

关于render函数

本文主要是介绍关于render函数,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

在看尚硅谷的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函数)


本文参考:

h(App) $mount 什么意思" href="https://segmentfault.com/a/1190000014254740" rel="external nofollow" target="_blank">render: h => h(App) $mount 什么意思 

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

Vue render函数

这篇关于关于render函数的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!