Vue2.0中的 render: h => h(App) 表达啥含义?
本文最后更新于 2323 天前,其中的信息可能已经有所发展或是发生改变。

render: h => h(App)含义?

看代码我自己看出这个分为两个知识点:

一个是vue render的知识点;另外一个是es6的箭头函数知识点~

首先render是一个渲染函数,直接到vue看文档:https://cn.vuejs.org/v2/guide/render-function.html

而es6的箭头函数呢:

以前我们函数的定义方法:

var fn1 = function(a, b) {
    return a + b
}
 
function fn2(a, b) {
    return a + b
}

但使用ES6箭头函数语法定义函数,将原函数的“function”关键字和函数名都删掉,并使用“=>”连接参数列表和函数体。

var fn1 = (a, b) => {
    return a + b
}
 
(a, b) => {
    return a + b
}

当函数参数只有一个,括号可以省略;但是没有参数时,括号不可以省略。

// 无参
var fn1 = function() {}
var fn1 = () => {}
 
// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}
 
// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
 
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式:
一种只包含一个表达式,省略掉了{ … }和return:

() => return 'hello'
(a, b) => a + b

还有一种可以包含多条语句,这时候就不能省略{ … }和return:

(a) => {
  a = a + 1
  return a
}

所以,现在render: h => h(App)含义是什么?

官方文档上没有使用ES6写法是这样:

render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
}

所以 createElement就是h,一个形参,没有任何意义,可以随意改变书写,还原下:

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

Image
Image

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇