vue.js - vue router2 render和...的问题
本文介绍了vue.js - 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实例,继续调用App
的render
,App
的render
还会继续调用它引用组件的render
...如此递归进行,到最后所有引用的组件都被渲染出来,生成了完整的DOM。
理解了这个过程,我们就知道,h(App)
的内部其实是调用了App.render()
,因此我们可以在vue根实例
中直接借用App
的render
,...App
会将App
对象展开,App
的render
函数就被展开到根实例
中,实现了同样的效果。
这篇关于vue.js - vue router2 render和...的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文