H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue router2 render和…的问题

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

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

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

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

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

回答:

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

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

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

本文地址:H5W3 » vue router2 render和…的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址