vue router2 render和...的问题

Question

我知道vue router里面在实例化得时候需要render渲染

const app=new Vue({
    el:'#app',
    router,
    render:h => h(App)
});

不过我看到有些人可以使用这样的写法实现:

const app=new Vue({
    el:'#app',
    router,
    ...App
});

我知道es6语法 ...可以析构对象,不过不理解为什么能够自动析构出render函数来使用,谢谢

Answer 1

在.vue文件里面，它的模板部分实际是编译成了render函数,而export出去的对象就是一个vue实例，它包含render函数用于渲染自身。vue的渲染逻辑其实很简单，就是从根实例开始，递归调用子组件的render函数。

以render:h => h(App)为例，Vue根实例的render函数使用App来渲染，而App也是一个Vue实例，继续调用App的render，App的render还会继续调用它引用组件的render...如此递归进行，到最后所有引用的组件都被渲染出来，生成了完整的DOM。

理解了这个过程，我们就知道,h(App)的内部其实是调用了App.render(),因此我们可以在vue根实例中直接借用App的render，...App会将App对象展开，App的render函数就被展开到根实例中，实现了同样的效果。