关于depth路由组件深度问题

Question

我对这段代码做了一些注释。按照我的理解。当前渲染的路由组件深度是从当前一直查找到根，

查找的过程中，如果说这一层级是路由组件。那么depth就会+1。

这里有几个疑惑点。parent算是当前组件实例吗？如果是的话。为什么还需要根据深度去获取当前组件实例。

另外data又是如何来的？

Answer 1

ustbhuangyi 2021-04-06 10:12:29

VueRouter 是一个函数式组件，data 在 render 的时候是作为第二个参数的属性传入的，parent 也是一样，表示它的父组件实例。



函数组件的源码建议自己去看一下，很简单的

• 提问者 城北丶 #1

  parent我可以理解为是一个占位符节点吗？

• ustbhuangyi 回复 提问者 城北丶 #2

  不是的喔，parent 是组件的 vm 实例，而不是 vnode

• 前端工程师666777888 #3

  例如app.vue中的router-view标签
  render函数中的parent是app.vue组件的实例

Answer 2

前端工程师666777888 2021-06-05 10:19:45

例如router-view在app.vue中：
在执行router-view的render函数时，先找当前url路径对应的route对象

这个route对象中有matched ，它里面存的是本身和祖先的record对象

疑问

http://localhost:8080/#/foo/bar/hou

假设app.vue中有router-view标签   1
foo.vue中也有router-view标签   2
bar.vue中也有router-view标签   3

在执行这3个router-view标签的render函数时，他们里面的parent.$route都是同一个吗，都是http://localhost:8080/#/foo/bar/hou路由对应的route对象吗

还是1对应的是/foo路径的route对象
2对应的是/foo/bar路径的route对象
3对应的是/foo/bar/hou路径的route对象

还是无论哪个组件实例访问$route，都是同一个route    都是Vue实例的_route对象

Answer 3

前端工程师666777888 2021-06-05 09:43:14

data最开始是在app.vue生成render函数时产生的。
data是router-view标签上的data

在把router-view生成vnode时，会带着这个data，也就是会把这个data传给router-view的render函数中，此时会对data进行扩展，给他上面添加routerView，routerInstances，hook，hook.init这几个属性

最后在生成vnode时，执行h(component,data)时，又把这个data传到了h中，此时会生成component对应的占位vnode

注：data最开始是router-view标签上的，最后传给了component对应的组件上