vue教程:render: h => h(App) 的解释

render 解释

由于 main.js 中的代码 import Vue from 'vue' 引入的是 vue.runtime.esm.js ,不支持 template,所以需要使用 render

原因见:vue教程:import Vue from vue 的解释

h => h(App) 解释

h => h(App) 是 lambda表达式,JavaScript中也称之为 箭头函数,是 匿名函数 的 简化写法

完整的匿名函数

本案例只修改 main.js 中的部分代码,如下:

new Vue({
  // render: h => h(App),
  render:function(h){
    return h(App)
  }
}).$mount('#app')

解释: 形参 h 是一个函数,用于创建元素,下面有解释

lambda表达式-简化写法1

省略 function,)和 { 之间由 => 分割,所以也称之为 箭头函数

new Vue({
  // render: h => h(App),
  render:(h) => {
    return h(App)
  }
}).$mount('#app')

lambda表达式-简化写法2

只有 一个参数,小括号可以 省略
但 没有参数 或 参数数量 超过 1,不能 省略小括号

new Vue({
  // render: h => h(App),
  render:h => {
    return h(App)
  }
}).$mount('#app')

lambda表达式-简化写法3

函数体只有一行,则花括号可以省略

new Vue({
  // render: h => h(App),
  render:h => h(App)
}).$mount('#app')

形参 h 解释

形参 h 是一个函数,用于创建 html标签,有2个参数:

  • 第一个参数是标签名,或 组件名
  • 第一个参数是标签内容
new Vue({
  // render: h => h(App),
  render:function(h){
    return h(App) // 将App根组件创建到页面上
  }
}).$mount('#app')

创建 div

new Vue({
  // render: h => h(App),
  render:function(createElement){
    return createElement('div','测试') //创建 div元素,内部是 “测试”
  }
}).$mount('#app')

页面上显示 测试

创建 button 按钮

new Vue({
  // render: h => h(App),
  render:function(createElement){
    return createElement('button','测试按钮')
  }
}).$mount('#app')

页面上显示按钮


原文出处:/show_1IX2htDuX1JO.html