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

在Vue中有这样一条语句：

render: h => h(App)；

1.这条语句的作用是什么呢？

这条语句是Vue2.x新增的语句，如果在Vue1.x下，就应该这样写

import App from './App'
new Vue({
    el: '#app',
    template: '',
    components: {
        App
    }
})

这个语句的含义是使用名为App的组件作为这个Vue实例的模板，用来替代index.html中的

。将这个模板渲染在页面上。

2.这条语句为什么长这个样子？

该语句的完整样子是这样的：

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

以上语句再使用ES6语法进行缩写：

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

在Vue.js中，因为createElement函数的作用是生成一个VNde节点，render函数得到这个VNode节点之后，返回给Vue.js的mount函数，渲染成为真实的DOM节点，并挂载到这个节点上。因此使用字母 “h” 来代表createElement函数。

进一步缩写为：

render (h) {
    return h(App);
}

再按照ES6的箭头函数的语法，就得到了：

render： h => h(App);

参考文章：https://segmentfault.com/q/1010000007130348