vue之routerView源码解析

routerView 视图渲染

核心就是根据路由匹配到视图，并且渲染到页面上

函数式组件，特点：没有状态，函数没有 this,标识为

functional : true;

说明

• name
  • 组件名 RouterView
• pros
  • 输入属性
  • name
    • 命名视图
• render
  • 渲染方法

render

• 第二个参数说明
  • options 核心：
    • parent 父组件
    • data 表示的是当前占位符的属性
• 核心变量
  • data.routerView = true; // 作为 routerView 组件的标识
  • depth = 0; // 默认渲染第一个 该字段标识 routerView 的层级，例如 App 组件中的 depth 为 0
• 核心逻辑
  • while 循环 计算出当前视图的层级 depth
  • 根据 route.mathced 和 depth 计算出对应的 record 信息
  • 若没有匹配到则直接渲染注释节点
  • 若匹配到则调用$createElement 方法渲染视图

参数 parent

当前组件为 routerView,在下述代码中它的父组件就是 app 组件

不难理解下面参数

• parent.$createElement vue 组件渲染视图的方法
• parent.$route 当前访问的路由信息 index
• parent.$vnode routerView 组件

<!-- 访问路由为 /index -->
<app>
    <router-view></router-view>
</app>

占位符

$vnode 占位符的表示方式 此处parent.$vnode 指的就是 routerView 组件

我可以理解为插入到router-view中渲染的组件，其$vnode.data.routerView有做赋值

depth 计算

根据 parent 一层层查找，直到查找到根实例为止

• 查找到 parent.$vnode
• 若找到，则判断当前$vnode 上 data.routerView 是否存在，存在则表示有 routerView，则+1
• 更新 parent 值，继续下一次循环

/* 
  举例说明：
    组件1(根组件)： <div id="app"> <router-view/> </div>
    组件2(组件1渲染的)  <div id="hello"> <router-view/> </div>

    场景1访问路由：/app app渲染在组件1
    场景2访问路由：/app/hello app渲染在组件1，hello渲染在组件2
 */

/* 
  场景1
  1.depth为0
  2.parent为app组件,app.$vnode.data没有找到routerView
  3.继续查找，到根组件，停止查询

  场景2
  1.depth为0
  2.parent为hello组件,hello组件插入到了app组件的router-view中，所以有routerView ，depth 加 1
  3.继续查找，hello的parent为app组件，app未插入到任何routerview中，所以没有routerView
  4.继续查找，到根组件，停止查询hello.parent为app，非根组件
 */

let depth = 0;
while (parent && parent._routerRoot !== parent) {
    const vnodeData = parent.$vnode && parent.$vnode.data;
    if (vnodeData) {
        if (vnodeData.routerView) {
            depth++;
        }
    }
    parent = parent.$parent;
}