Vue3 源码头脑风暴之 7 ☞ runtime-core(3) - render component

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

instance.update = effect(
  function componentEffect() {
    // 监听更新
    if (!instance.isMounted) {
      // ...
    } else {
      // updateComponent
      // 当组件自身的状态或父组件调用 processComponent 时触发
      console.log("component update");
      let { next, bu, u, parent, vnode } = instance;
      let originNext = next;
      let vnodeHook: VNodeHook | null | undefined;

      if (next) {
        next.el = vnode.el;
        updateComponentPreRender(instance, next, optimized);
      } else {
        next = vnode;
      }

      // beforeUpdate hook
      if (bu) {
        invokeArrayFns(bu);
      }
      // onVnodeBeforeUpdate
      if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {
        invokeVNodeHook(vnodeHook, parent, next, vnode);
      }

      //render
      const nextTree = renderComponentRoot(instance);
      const prevTree = instance.subTree;
      instance.subTree = nextTree;

      patch(
        prevTree,
        nextTree,
        // 如果在 teleport 中，parent 可能会发生改变
        hostParentNode(prevTree.el!)!,
        // anchor may have changed if it's in a fragment
        getNextHostNode(prevTree),
        instance,
        parentSuspense,
        isSVG
      );

      next.el = nextTree.el;
      if (originNext === null) {
        // self-triggered update. In case of HOC, update parent component
        // vnode el. HOC is indicated by parent instance's subTree pointing
        // to child component's vnode
        // TODO
      }

      // updated hook
      if (u) {
        queuePostRenderEffect(u, parentSuspense);
      }
      // onVnodeUpdated
      if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {
        queuePostRenderEffect(() => {
          invokeVNodeHook(vnodeHook!, parent, next!, vnode);
        });
      }
    }
  },
  __DEV__
    ? // 提供 onTrack/onTrigger 选项执行 rtc&rtg 两个周期函数
      createDevEffectOptions(instance)
    : prodEffectOptions
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const updateComponentPreRender = (
    instance: ComponentInternalInstance,
    nextVNode: VNode,
    optimized: boolean
  ) => {
    nextVNode.component = instance
    // const prevProps = instance.vnode.props
    instance.vnode = nextVNode
    instance.next = null
    // TODO update props
    // TODO update slots

    // props update may have triggered pre-flush watchers.
    // flush them before the render update.
    flushPreFlushCbs(undefined, instance.update)
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

export function normalizePropsOptions(
  comp: ConcreteComponent,
  appContext: AppContext,
  asMixin: false
): NormalizedPropsOptions {
  if (!appContext.deopt && comp.__props) {
    return comp.__props
  }

  const raw = comp.props
  const normalized: NormalizedPropsOptions[0] = {}
  const needCastKeys: NormalizedPropsOptions[1] = []

  // mixin/extends props 应用
  let hasExtends = false
  // 必须开支 2.x options api 支持，且不是函数式组件
  // 继承来的属性，用法： ~CompA = { extends: CompB, ... }~
  // CompA 会继承 CompB 的 props
  if (__FEATURE_OPTIONS_API__ && !isFunction(comp)) {
    const extendProps = (raw: ComponentOptions) => {
      hasExtends = true
      const [props, keys] = normalizePropsOptions(raw, appContext, true)
      extend(normalized, props)
      if (keys) {
        needCastKeys.push(...keys)
      }
    }

    // Comp: { extends: CompA } 处理
    if (comp.extends) {
      extendProps(comp.extends)
    }

    // Comp: { mixins: [mixin] } 处理
    if (!asMixin && appContext.mixins.length) {
      appContext.mixins.forEach(extendProps)
    }
  }

  // 既没有自身的 props 也没有 extends 继承来的 props 初始化为 []
  if (!raw && !hasExtends) {
    return (comp.__props = EMPTY_ARR as any)
  }

  if (isArray(raw)) {
    // 当 props 是数组的时候，必须是字符类型，如: props: ['foo', 'bar', 'foo-bar']
    // 'foo-bar' 会转成 'fooBar'，不允许 '$xxx' 形式的变量名
    for (let i = 0; i < raw.length; i++) {
      const normalizedKey = camelize(raw[i])
      // 组件的属性名不能是以 $xx 开头的名称，这个是作为内部属性的
      if (validatePropName(normalizedKey)) {
        normalized[normalizedKey] = EMPTY_OBJ
      }
    }
  } else if (raw) {
    // 对象类型 props: { foo: 1, bar: 2, ... }
    for (const key in raw) {
      // 'foo-bar' -> 'fooBar'
      const normalizedKey = camelize(key)
      // 检查 $xxx 非法属性
      if (validatePropName(normalizedKey)) {
        const opt = raw[key]
        // ? 值为数组或函数变成： { type: opt } ?
        // 这里含义其实是： ~props: { foo: [Boolean, Function] }~
        // 可以用数组定义该属性可以是多种类型的其中一种
        const prop: NormalizedProp = (normalized[normalizedKey] =
          isArray(opt) || isFunction(opt) ? { type: opt } : opt)
        if (prop) {
          // 找到 Boolean 在 foo: [Boolean, Function] 中的索引
          const booleanIndex = getTypeIndex(Boolean, prop.type)
          const stringIndex = getTypeIndex(String, prop.type)
          prop[BooleanFlags.shouldCast] = booleanIndex > -1
          // [String, Boolean] 类型，String 在 Boolean 前面
          prop[BooleanFlags.shouldCastTrue] =
            stringIndex < 0 || booleanIndex < stringIndex
          // 如果是布尔类型的值或者有默认值的属性需要转换
          // 转换是根据 type 和 default 值处理
          // type非函数，default是函数，执行 default() 得到默认值
          if (booleanIndex > -1 || hasOwn(prop, 'default')) {
            needCastKeys.push(normalizedKey)
          }
        }
      }
    }
  }

  return (comp.__props = [normalized, needCastKeys])
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// component.ts > setupComponent()
export function setupComponent(
  instance: ComponentInternalInstance,
  isSSR = false
) {
  // ...
  // init props & slots
  initProps(instance, props, isStateful, isSSR);
  // ...
  return setupResult;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

export function initProps(
  instance: ComponentInternalInstance,
  rawProps: Data | null,
  isStateful: number,
  isSSR = false
) {
  const props: Data = {};
  const attrs: Data = {};
  def(attrs, InternalObjectKey, 1);
  setFullProps(instance, rawProps, props, attrs);
  // TODO validation

  if (isStateful) {
    instance.props = isSSR ? props : shallowReactive(props);
  } else {
    if (!instance.type.props) {
      // functional optional props, props === attrs
      instance.props = attrs;
    } else {
      // functional declared props
      instance.props = props;
    }
  }
  instance.attrs = attrs;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function setFullProps(
  instance: ComponentInternalInstance,
  rawProps: Data | null,
  props: Data,
  attrs: Data
) {
  const [options, needCastKeys] = instance.propsOptions;
  if (rawProps) {
    for (const key in rawProps) {
      const value = rawProps[key];
      // key, ref 保留，不往下传
      // 即这两个属性不会继承给 child
      if (isReservedProp(key)) {
        continue;
      }

      let camelKey;
      if (options && hasOwn(options, (camelKey = camelize(key)))) {
        props[camelKey] = value;
      } else if (!isEmitListener(instance.emitsOptions, key)) {
        attrs[key] = value;
      }
    }
  }

  if (needCastKeys) {
    const rawCurrentProps = toRaw(props);
    for (let i = 0; i < needCastKeys.length; i++) {
      const key = needCastKeys[i];
      props[key] = resolvePropValue(
        options!,
        rawCurrentProps,
        key,
        rawCurrentProps[key],
        instance
      );
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

function resolvePropValue(
  options: NormalizedProps,
  props: Data,
  key: string,
  value: unknown,
  instance: ComponentInternalInstance
) {
  /*
   * 这里面的处理是针对 props: { name: { ... } } 类型而言
   * 1. 默认值的处理， default 可能是函数或普通类型值，如果是函数应该得到
   * 函数执行的结果作为它的值，注意下面的检测函数时前置条件是该类型不是函数，
   * 如果类型也是函数，默认值就是该函数本身，而非执行后的结果值
   * 2. 布尔值的处理，值转成 true or false
   */
  const opt = options[key]
  if (opt != null) {
    const hasDefault = hasOwn(opt, 'default')
    // 默认值
    if (hasDefault && value === undefined) {
      const defaultValue = opt.default
      // props: { name: { default: (props) => 'xxx' } }
      // 类型不是函数？但是默认值是函数，执行得到结果
      if (opt.type !== Function && isFunction(defaultValue)) {
        setCurrentInstance(instance)
        value = defaultValue(props)
        setCurrentInstance(null)
      } else {
        // props: { name: { default: 'xxx' } }
        value = defaultValue
      }
    }
    // boolean casting
    if (opt[BooleanFlags.shouldCast]) {
      if (!hasOwn(props, key) && !hasDefault) {
        value = false
      } else if (
        opt[BooleanFlags.shouldCastTrue] &&
        (value === '' || value === hyphenate(key))
      ) {
        value = true
      }
    }
  }
  return value
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

// 如果组件是个对象，而非函数是组件是会经过这个函数
function setupStatefulComponent(
  instance: ComponentInternalInstance,
  isSSR: boolean
) {
  const Component = instance.type as ComponentOptions;

  // 0. create render proxy property access cache
  // 这个是针对 instance 上属性的 get 操作类型进行了 key 值缓存
  // 比如：当你对 setupState 或 data的属性 进行了 get 访问，
  // 那么该属性的key值会记录为该类型(accessCache[key]=AccessTypes.SETUP)
  // 当你下次再在 instance 上访问这个key 的时候，那么这个时候就会知道这个 key
  // 是在 setupState 上，那么就直接返回 setupState[key] 就行了
  // 而不用去重复进行 if...elseif...else 去 setupData, data, context
  // 或 props 判断然后决定去哪个上面取值，加快求值速度。
  // 如： setupState={foo:1}, data={bar:2}
  // 取值： this.foo 触发 get 操作，这个时候第一次取值的时候会进行
  // if setupState else if data 检测'foo'在哪个对象上，发现在
  // setupState 上，然后将 'foo' 缓存到 accessCache['foo'] ='setup'
  // 下次再次取值this.foo，那么本次就会直接返回 setupState['foo']
  instance.accessCache = Object.create(null);

  // 1. create public instance / render proxy
  // also mark it raw so it's never observed
  // 代理目的：让取值操作能在 setupState, data, ctx, props 及
  // appContext.config.globalProperties 上依次查找对应的属性值
  // 优先级：
  // 1. 非 $xxx 属性， setupState > data > ctx > props
  // 2. this.$xxx 取值， public 属性: $,$el,$data,$props,$attrs
  //  ,$slots,$refs,$parent,$root,$emit,$options,$forceUpdate,
  //  ,$nextTick,$watch
  // > cssModule 属性 vue-loader 注入的css 变量
  // > instance.ctx
  // > appContext.config.globalProperties, 如： this.$router
  instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);

  console.log("call setup");
  // 2. call setup()
  const { setup } = Component;
  if (setup) {
    // 传递给 setup(props, setupContext) 的第二个参数
    // setupContext: { attrs, slots, emit, expose }
    const setupContext = (instance.setupContext =
      setup.length > 1 ? createSetupContext(instance) : null);

    currentInstance = instance;
    // 实例初始化期间，禁止 track 操作，get 收集依赖
    pauseTracking();
    // 执行 setup 函数
    const setupResult = callWithErrorHandling(
      setup,
      instance,
      ErrorCodes.SETUP_FUNCTION,
      [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
    );
    resetTracking();
    currentInstance = null;

    // 对setup 结果处理，返回值只能是对象或函数
    if (isPromise(setupResult)) {
      if (isSSR) {
        // return the promise so server-renderer can wait on it
        return setupResult.then((resolvedResult: unknown) => {
          handleSetupResult(instance, resolvedResult, isSSR);
        });
      } else if (__FEATURE_SUSPENSE__) {
        // async setup returned Promise.
        // bail here and wait for re-entry.

        instance.asyncDep = setupResult;
      } else if (__DEV__) {
        // TODO warn
      }
    } else {
      // setup() 执行结果只能是函数或对象
      // 1. 如果是对象，返回对象的所有属性当做状态处理，和 data 性质相同
      // 2. 如果是函数，视为组件的 render 函数
      // 即，支持在 setup 中直接手写 render 函数
      handleSetupResult(instance, setupResult, isSSR);
    }
  } else {
    // ...
  }
}

// handleSetupResult
export function handleSetupResult(
  instance: ComponentInternalInstance,
  setupResult: unknown,
  isSSR: boolean
) {
  // 1. 如果是函数当做render函数处理
  // 2. 如果是对象
  if (isFunction(setupResult)) {
    // 返回内联 render 函数
    if (__NODE_JS__ && (instance.type as ComponentOptions).__ssrInlineRender) {
      // SSR 服务端渲染，替换 ssrRender 函数
      // when the function's name is `ssrRender` (compiled by SFC inline mode),
      // set it as ssrRender instead.
      instance.ssrRender = setupResult;
    } else {
      instance.render = setupResult as InternalRenderFunction;
    }
  } else if (isObject(setupResult)) {
    // 返回 bindings，这些变量可以直接在模板中使用
    // 注意这里的 state 是 shallow ref，即非递归 reactive 的
    instance.setupState = proxyRefs(setupResult);
  } else {
    // warn 必须返回对象
  }
  // 最后完成render函数检查
  // 可能是 SFC情况的 模板语法，没有直接的render函数，需要进行
  // compile 操作生成 instance.rendder = Component.render函数
  // render 执行不是这里，而是在 instance.update 的 effect 函数中的
  // renderComponentRoot 中
  finishComponentSetup(instance, isSSR);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

const updateComponent = (n1: VNode, n2: VNode, optimized: boolean) => {
  console.log("update component");
  const instance = (n2.component = n1.component)!;
  if (shouldUpdateComponent(n1, n2, optimized)) {
    console.log("should update component....");
    if (
      __FEATURE_SUSPENSE__ &&
      instance.asyncDep && // async setup
      instance.asyncResolved
    ) {
      // ...
      return;
    } else {
      // 新增代码》》》》》》》》
      // 正常更新
      instance.next = n2;
      // 考虑到 child 组件可能正在队列中排队，移除它避免
      // 在同一个 flush tick 重复更新同一个子组件
      // 当下一次更新来到时，之前的一次更新取消？
      invalidateJob(instance.update);
      // instance.update 是在 setupRenderEffect 中
      // 定义的一个 reactive effect runner
      // 主动触发更新
      instance.update();
    }
    return;
  } else {
    // ...
  }
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

const unmountComponent = (
  instance: ComponentInternalInstance,
  parentSuspense: SuspenseBoundary | null,
  doRemove?: boolean
) => {
  const { bum, effects, update, subTree, um } = instance;
  // beforeUnmount hook
  if (bum) {
    invokeArrayFns(bum);
  }
  if (effects) {
    for (let i = 0; i < effects.length; i++) {
      stop(effects[i]);
    }
  }

  // update may be null if a component is unmounted before its async
  // setup has resolved.
  if (update) {
    stop(update);
    unmount(subTree, instance, parentSuspense, doRemove);
  }

  // unmounted hook
  if (um) {
    queuePostRenderEffect(um, parentSuspense);
  }
  queuePostRenderEffect(() => {
    instance.isUnmounted = true;
  }, parentSuspense);

  // TODO suspense
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const processText: ProcessTextOrCommentFn = (n1, n2, container, anchor) => {
  if (n1 == null /* old */) {
    // 新节点，插入处理
    hostInsert(
      (n2.el = hostCreateText(n2.children as string)),
      container,
      anchor
    );
  } else {
    // has old vnode, need to diff
    const el = (n2.el = n1.el!);
    if (n2.children !== n1.children) {
      hostSetText(el, n2.children as string);
    }
  }
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

const processCommentNode: ProcessTextOrCommentFn = (
    n1,
    n2,
    container,
    anchor
  ) => {
    if (n1 == null) {
      hostInsert(
        (n2.el = hostCreateComment((n2.children as string) || '')),
        container,
        anchor
      )
    } else {
      // there's no support for dynamic comments
      n2.el = n1.el
    }
  }

1
2
3
4
5
6
7

// case Static:
if (n1 == null) {
  mountStaticNode(n2, container, anchor, isSVG);
} else if (__DEV__) {
  patchStaticNode(n1, n2, container, isSVG);
}
// break

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

const mountStaticNode = (
  n2: VNode,
  container: RendererElement,
  anchor: RendererNode | null,
  isSVG: boolean
) => {
  // static nodes are only present when used with compiler-dom/runtime-dom
  // which guarantees presence of hostInsertStaticContent.
  [n2.el, n2.anchor] = hostInsertStaticContent!(
    n2.children as string,
    container,
    anchor,
    isSVG
  );
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function insertStaticContent(content, parent, anchor, isSVG) {
  const temp = isSVG
    ? tempSVGContainer || (tempSVGContainer = doc.createElementNS(svgNS, "svg"))
    : tempContainer || (tempContainer = doc.createElement("div"));
  temp.innerHTML = content;
  const first = temp.firstChild as Element;
  let node: Element | null = first;
  let last: Element = node;
  while (node) {
    last = node;
    nodeOps.insert(node, parent, anchor);
    node = temp.firstChild as Element;
  }
  return [first, last];
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

const patchStaticNode = (
  n1: VNode,
  n2: VNode,
  container: RendererElement,
  isSVG: boolean
) => {
  // static nodes are only patched during dev for HMR
  if (n2.children !== n1.children) {
    const anchor = hostNextSibling(n1.anchor!);
    // remove existing
    removeStaticNode(n1);
    // insert new
    [n2.el, n2.anchor] = hostInsertStaticContent!(
      n2.children as string,
      container,
      anchor,
      isSVG
    );
  } else {
    n2.el = n1.el;
    n2.anchor = n1.anchor;
  }
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const moveStaticNode = (
  { el, anchor }: VNode,
  container: RendererElement,
  nextSibling: RendererNode | null
) => {
  let next;
  while (el && el !== anchor) {
    next = hostNextSibling(el);
    hostInsert(el, container, nextSibling);
    el = next;
  }
  hostInsert(anchor!, container, nextSibling);
};

1
2
3
4
5
6
7
8
9

const removeStaticNode = ({ el, anchor }: VNode) => {
  let next;
  while (el && el !== anchor) {
    next = hostNextSibling(el);
    hostRemove(el);
    el = next;
  }
  hostRemove(anchor!);
};

1
2
3
4
5
6
7

export const TeleportImpl = {
  __isTeleport: true,
  process() {},
  remove() {},
  move: moveTeleport,
  hydrate: hydrateTeleport
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

const resolveTarget = <T = RendererElement>(
  props: TeleportProps | null,
  select: RendererOptions['querySelector']
): T | null => {
  const targetSelector = props && props.to
  if (isString(targetSelector)) {
    if (!select) {
      // 无效选择器
      return null
    } else {
      const target = select(targetSelector)
      // Teleport 设置失败
      return target as any
    }
  } else {
    // 无效的 Teleport 目标
    return targetSelector as any
  }
}

1
2
3
4
5
6
7
8
9

function moveTeleport(
  vnode: VNode,
  container: RendererElement,
  parentAnchor: RendererNode | null,
  { o: { insert }, m: move }: RendererInternals,
  moveType: TeleportMoveTypes = TeleportMoveTypes.REORDER
) {
  // TODO
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

function hydrateTeleport(
  node: Node,
  vnode: TeleportVNode,
  parentComponent: ComponentInternalInstance | null,
  parentSuspense: SuspenseBoundary | null,
  optimized: boolean,
  {
    o: { nextSibling, parentNode, querySelector }
  }: RendererInternals<Node, Element>,
  hydrateChildren: (
    node: Node | null,
    vnode: VNode,
    container: Element,
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: SuspenseBoundary | null,
    optimized: boolean
  ) => Node | null
): Node | null {
  return vnode.anchor && nextSibling(vnode.anchor as Node)
}

1
2
3
4

// Force-casted public typing for h and TSX props inference
export const Teleport = (TeleportImpl as any) as {
  __isTeleport: true
  new (): { $props: VNodeProps & TeleportProps }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

function process(/*省略参数*/) {
  // ...

  const disabled = isTeleportDisabled(n2.props);
  const { shapeFlag, children } = n2;

  if (n1 == null) {
    // insert anchors in the main view
    // <container><placeholder/><anchor/></container>
    insert(placeholder, container, anchor);
    // <container><main-anchor/><anchor/></container>
    insert(mainAnchor, container, anchor);
    // 根据选择器 <Teleport to="selector"/> selector
    // 找到目标 DOM 元素
    const target = (n2.target = resolveTarget(n2.props, querySelector));
    // <target><!-- '' --></target>，用来作为插入时的参考节点
    const targetAnchor = (n2.targetAnchor = createText(""));
    if (target) {
      insert(targetAnchor, target);
      // #2652 we could be teleporting from a non-SVG tree into an SVG tree
      isSVG = isSVG || isTargetSVG(target);
    } /* else if warn ... */

    const mount = (container: RendererElement, anchor: RendererNode) => {
      // 将 vnode children 渲染到 target 元素内
      // 会插入到 anchor 的前面,如： ~<target><children/><!--''--></target>~
    };

    if (disabled) {
      // 失效状态，不直接渲染到目标元素中，而是挂在了 #app 内对应的
      // 节点里面，等待状态 enable 再渲染回 target 元素
      mount(container, mainAnchor);
    } else if (target) {
      // 直接渲染进目标元素
      mount(target, targetAnchor);
    }
  } else {
    // update content
    // 非首次渲染
    n2.el = n1.el;
    // 已经渲染到 tar

    if (n2.dynamicChildren) {
      // 动态子节点 patch
    } else if (!optimized) {
      // patch n1|n2 children
    }

    if (disabled) {
      // n2 new teleport disabled -> n1 old target enabled
      // n2 直接移到 #app 结构中的 container 上，暂时不直接渲染到
      // 目标元素上
      if (!wasDisabled) {
        // moveTeleport
      }
    } else {
      // target changed
      // teleport 的 to 属性值发生了变化，找到新的目标
      // 进行移动
      if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {
        // 1. 找新目标
        // 2. 将 n2 移动到新的目标中
        // ...
      } else if (wasDisabled) {
        // 状态变更
        // disabled -> enabled
        // move into teleport target
        // 从 container 中将 n2 移到目标元素中
      }
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

export interface SuspenseBoundary {
  vnode: VNode<RendererNode, RendererElement, SuspenseProps>;
  parent: SuspenseBoundary | null;
  parentComponent: ComponentInternalInstance | null;
  isSVG: boolean;
  container: RendererElement;
  hiddenContainer: RendererElement;
  anchor: RendererNode | null;
  activeBranch: VNode | null;
  pendingBranch: VNode | null;
  deps: number;
  pendingId: number;
  timeout: number;
  isInFallback: boolean;
  isHydrating: boolean;
  isUnmounted: boolean;
  effects: Function[];
  resolve(force?: boolean): void;
  fallback(fallbackVNode: VNode): void;
  move(
    container: RendererElement,
    anchor: RendererNode | null,
    type: MoveType
  ): void;
  next(): RendererNode | null;
  registerDep(
    instance: ComponentInternalInstance,
    setupRenderEffect: SetupRenderEffectFn
  ): void;
  unmount(parentSuspense: SuspenseBoundary | null, doRemove?: boolean): void;
}