关于ES6箭头函数不理解的地方

Question

ViewComponent: { render: h => h('div', 'loading...') }

这个如何解释？

求牛牛来解释下

Answer 1

箭头左侧为函数参数，右侧为执行体，像下面这么看

ViewComponent: { 
    render: function(h){
        return h('div', 'loading...'); 
      }
}

Answer 2

这样子看

ViewComponent: { render:function(h){
                            return h('div', 'loading...')
                        }
                }

Answer 3

1. 如果箭头函数只有一个参数,参数列表中的括号是可以省略掉的

ViewComponent: { render: h => h('div', 'loading...') }
等价于
ViewComponent: { render: (h) => h('div', 'loading...') }


2. 如果箭头函数的函数体中,只有一个表达式(值),那么return这个关键字是可以省略掉的

ViewComponent: { render: (h) => h('div', 'loading...') }
等价于
ViewComponent: { render: (h) => return h('div', 'loading...') }


3. 最后就是箭头函数到普通函数的转化了

ViewComponent: { render: (h) => return h('div', 'loading...') }
等价于
ViewComponent: { render: function(h) { return h('div', 'loading...') } }

最后送上一个传送门箭头函数

Answer 4

先好好看看这本书,这就是一种简写方法,ES6