Vue3 源码头脑风暴之 7 ☞ runtime-core(1)

 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

 // 3. props 处理, class & style normalization
 if (props) {
   // for reactive or proxy objects, we need to clone it to enable mutation.
   if (isProxy(props) || InternalObjectKey in props) {
     props = extend({}, props);
   }
   let { class: klass, style } = props;
   if (klass && !isString(klass)) {
     // 1. string -> klass
     // 'foo' -> 'foo'
     // 2. array -> '' + arr.join(' ')
     // ['foo', 'bar'] -> 'foo bar'
     // 3. object -> '' + value ? ' value' : ''
     // { foo: true, bar: false, baz: true } -> 'foo baz'
     props.class = normalizeClass(klass);
   }

   if (isObject(style)) {
     // reactive state objects need to be cloned since they are likely to be
     // mutated
     if (isProxy(style) && !isArray(style)) {
       style = extend({}, style);
     }
     // 1. array -> object
     // [{ color: 'red' }, 'font-size:10px;height:100px;'] ->
     // { color: 'red', 'font-size': '10px', height: '100px' }
     // 2. object -> object 原样返回
     props.style = normalizeStyle(style);
   }
 }

1
2
3
4
5
6
7
8

  // 2. class component
  if (isClassComponent(type)) {
    type = type.__vccOpts;
  }

  export function isClassComponent(value: unknown): value is ClassComponent {
    return isFunction(value) && "__vccOpts" in 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

  // > in createVNode
  // 1. type is vnode
  if (isVNode(type)) {
    // createVNode receiving an existing vnode. This happens in cases like
    // <component :is="vnode"/>
    // #2078 make sure to merge refs during the clone instead of overwriting it
    const cloned = cloneVNode(type, props, true /* mergeRef: true */);
    if (children) {
      normalizeChildren(cloned, children);
    }
    return cloned;
  }

  // cloneVNode
  // 省略直接取 vnode 值部分
  export function cloneVNode<T, U>(
    vnode: VNode<T, U>,
    extraProps?: (Data & VNodeProps) | null,
    mergeRef = false
  ): VNode<T, U> {
    // This is intentionally NOT using spread or extend to avoid the runtime
    // key enumeration cost.
    const { props, ref, patchFlag } = vnode;
    const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props;
    return {
      __v_isVNode: true,
      [ReactiveFlags.SKIP]: true,
      type: vnode.type,
      props: mergedProps,
      key: mergedProps && normalizeKey(mergedProps),
      ref:
        extraProps && extraProps.ref
          ? // #2078 in the case of <component :is="vnode" ref="extra"/>
            // if the vnode itself already has a ref, cloneVNode will need to merge
            // the refs so the single vnode can be set on multiple refs
            mergeRef && ref
            ? isArray(ref)
              ? ref.concat(normalizeRef(extraProps)!)
              : [ref, normalizeRef(extraProps)!]
            : normalizeRef(extraProps)
          : ref,
      // if the vnode is cloned with extra props, we can no longer assume its
      // existing patch flag to be reliable and need to add the FULL_PROPS flag.
      // note: perserve flag for fragments since they use the flag for children
      // fast paths only.
      patchFlag:
        extraProps && vnode.type !== Fragment
          ? patchFlag === -1 // hoisted node
            ? PatchFlags.FULL_PROPS
            : patchFlag | PatchFlags.FULL_PROPS
          : patchFlag,

      ssContent: vnode.ssContent && cloneVNode(vnode.ssContent),
      ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback),
    };
  }

 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

  // 7. normalize suspense children
  if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
    const { content, fallback } = normalizeSuspenseChildren(vnode);
    vnode.ssContent = content;
    vnode.ssFallback = fallback;
  }

  // normalizeSuspenseChildren
  export function normalizeSuspenseChildren(
    vnode: VNode
  ): {
    content: VNode;
    fallback: VNode;
  } {
    const { shapeFlag, children } = vnode;
    let content: VNode, fallback: VNode;

    if (shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
      content = normalizeSuspenseSlot((children as Slots).default);
      fallback = normalizeSuspenseSlot((children as Slots).fallback);
    } else {
      content = normalizeSuspenseSlot(children as VNodeChild);
      fallback = normalizeVNode(null);
    }

    return {
      content,
      fallback,
    };
  }

// >>> normalizeSuspenseSlot
function normalizeSuspenseSlot(s: any) {
  if (isFunction(s)) {
    s = s()
  }
  if (isArray(s)) {
    // ROOT 必须是单节点 <div>...</div>
    const singleChild = filterSingleRoot(s)
    if (__DEV__ && !singleChild) {
      warn(`<Suspense> slots expect a single root node.`)
    }
    s = singleChild
  }
  return normalizeVNode(s)
}

// normalizeVNode
export function normalizeVNode(child: VNodeChild): VNode {
  if (child == null || typeof child === 'boolean') {
    // empty placeholder
    return createVNode(Comment)
  } else if (isArray(child)) {
    // fragment
    return createVNode(Fragment, null, child)
  } else if (typeof child === 'object') {
    // already vnode, this should be the most common since compiled templates
    // always produce all-vnode children arrays
    // 这是最常用的情况，因为使用模板的时候最后生成的 children 是数组
    return child.el === null ? child : cloneVNode(child)
  } else {
    // strings and numbers
    return createVNode(Text, null, String(child))
  }
}

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

export function filterSingleRoot(
  children: VNodeArrayChildren
): VNode | undefined {
  let singleRoot;
  for (let i = 0; i < children.length; i++) {
    const child = children[i];
    if (isVNode(child)) {
      // ignore user comment
      if (child.type !== Comment || child.children === "v-if") {
        if (singleRoot) {
          // has more than 1 non-comment child, return now

          return;
        } else {
          singleRoot = child;
        }
      }
    } else {
      return;
    }
  }
  return singleRoot;
}

1
2
3
4
5
6
7
8
9

// Since v-if and v-for are the two possible ways node structure can dynamically
// change, once we consider v-if branches and each v-for fragment a block, we
// can divide a template into nested blocks, and within each block the node
// structure would be stable. This allows us to skip most children diffing
// and only worry about the dynamic nodes (indicated by patch flags).
// 针对 v-if, v-for 动态性做的由于，减少对静态节点的 diff ，只需要关心动态节点即可
export const blockStack: (VNode[] | null)[] = []
let currentBlock: VNode[] | null = null

1
2
3
4
5
6

// Whether we should be tracking dynamic child nodes inside a block.
// Only tracks when this value is > 0
// We are not using a simple boolean because this value may need to be
// incremented/decremented by nested usage of v-once (see below)
// 是否应该 tracking block 内动态的孩子节点
let shouldTrack = 1;

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

 // 8. currentBlock
 if (
   shouldTrack > 0 &&
   // 避免 block 节点 tracking 自己
   !isBlockNode &&
   // has current parent block
   currentBlock &&
   // presence of a patch flag indicates this node needs patching on updates.
   // component nodes also should always be patched, because even if the
   // component doesn't need to update, it needs to persist the instance on to
   // the next vnode so that it can be properly unmounted later.
   (patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
   // the EVENTS flag is only for hydration and if it is the only flag, the
   // vnode should not be considered dynamic due to handler caching.
   patchFlag !== PatchFlags.HYDRATE_EVENTS
 ) {
   currentBlock.push(vnode);
 }

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

/**
 ,* Open a block.
 ,* This must be called before `createBlock`. It cannot be part of `createBlock`
 ,* because the children of the block are evaluated before `createBlock` itself
 ,* is called. The generated code typically looks like this:
 ,*
 ,* ```js
 ,* function render() {
 ,*   return (openBlock(),createBlock('div', null, [...]))
 ,* }
 ,* ```
 ,* disableTracking is true when creating a v-for fragment block, since a v-for
 ,* fragment always diffs its children.
 ,*
 ,* @private
 ,*/
export function openBlock(disableTracking = false) {
  blockStack.push((currentBlock = disableTracking ? null : []));
}

1
2
3
4

export function closeBlock() {
  blockStack.pop();
  currentBlock = blockStack[blockStack.length - 1] || null;
}

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

/**
 * Block tracking sometimes needs to be disabled, for example during the
 * creation of a tree that needs to be cached by v-once. The compiler generates
 * code like this:
 *
 * ``` js
 * _cache[1] || (
 *   setBlockTracking(-1),
 *   _cache[1] = createVNode(...),
 *   setBlockTracking(1),
 *   _cache[1]
 * )
 * ```
 *
 * @private
 */
export function setBlockTracking(value: number) {
  shouldTrack += 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

/**
 * Create a block root vnode. Takes the same exact arguments as `createVNode`.
 * A block root keeps track of dynamic nodes within the block in the
 * `dynamicChildren` array.
 *
 * @private
 */
export function createBlock(
  type: VNodeTypes | ClassComponent,
  props?: Record<string, any> | null,
  children?: any,
  patchFlag?: number,
  dynamicProps?: string[]
): VNode {
  const vnode = createVNode(
    type,
    props,
    children,
    patchFlag,
    dynamicProps,
    true /* isBlock: prevent a block from tracking itself */
  );
  // save current block children on the block vnode
  vnode.dynamicChildren = currentBlock || (EMPTY_ARR as any);
  // close block
  closeBlock();
  // a block is always going to be patched, so track it as a child of its
  // parent block
  if (shouldTrack > 0 && currentBlock) {
    currentBlock.push(vnode);
  }
  return vnode;
}

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

// encode the vnode type information into a bitmap
const shapeFlag = isString(type)
  ? ShapeFlags.ELEMENT // 1
  : __FEATURE_SUSPENSE__ && isSuspense(type)
  ? ShapeFlags.SUSPENSE // 1 << 7, 128
  : isTeleport(type)
  ? ShapeFlags.TELEPORT // 1 << 6, 64
  : isObject(type)
  ? ShapeFlags.STATEFUL_COMPONENT // 1 << 2, 4
  : isFunction(type)
  ? ShapeFlags.FUNCTIONAL_COMPONENT // 1 << 1, 2
  : 0;

 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

// -> getter
let getter: () => any;
let forceTrigger = false;
// 2.1 source is ref
if (isRef(source)) {
  getter = () => (source as Ref).value;
  forceTrigger = !!(source as Ref)._shallow;
}

// cb -> job 封装
let oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUE;
const job: SchedulerJob = () => {
  if (cb) {
    // watch(source, cb)
    const newValue = runner();
    if (deep || forceTrigger || hasChanged(newValue, oldValue)) {
      // cleanup
      if (cleanup) cleanup();
      callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
        newValue,
        // pass undefined as the old value when it's changed for the first time
        // 第一次的时候 oldValue 为 undefined
        oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
        onInvalidate,
      ]);
      oldValue = newValue;
    }
  } else {
    // TODO
  }
};

// scheduler 封装
scheduler = () => {
  if (!instance || instance.isMounted) {
    queuePreFlushCb(job);
  } else {
  }
};

// 什么方式执行 runner?
// 8. TODO runner 如何执行？
if (cb) {
  if (immediate) {
    // TODO
  } else {
    oldValue = runner();
  }
} else if (false /*flush->post*/) {
} else {
  runner();
}

 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

// 1. 如果是 reactive，需要深度监听
if (isReactive(source)) {
  getter = () => source;
  deep = true;
}

// 2. deep: true
if (cb && deep) {
  const baseGetter = getter;
  // a. deep: true
  // b. source is reactive
  getter = () => traverse(baseGetter());
}

// traverse 函数
function traverse(value: unknown, seen: Set<unknown> = new Set()) {
  if (!isObject(value) || seen.has(value)) {
    return value;
  }
  seen.add(value);
  if (isRef(value)) {
    traverse(value.value, seen);
  } else if (isArray(value)) {
    for (let i = 0; i < value.length; i++) {
      traverse(value[i], seen);
    }
  } else if (isSet(value) || isMap(value)) {
    value.forEach((v: any) => {
      traverse(v, seen);
    });
  } else {
    for (const key in value) {
      traverse(value[key], seen);
    }
  }
  return value;
}

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

if (isArray(source)) {
  getter = () =>
    source.map((s) => {
      if (isRef(s)) {
        return s.value;
      } else if (isReactive(s)) {
        return traverse(s);
      } else if (isFunction(s)) {
        return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER);
      } else {
        // TODO warn invalid source
      }
    });
}

 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

if (isFunction(source)) {
  // 如果是函数，直接执行取得函数执行结果
  if (cb) {
    // getter with cb
    getter = () =>
      callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER);
  } else {
    // no cb -> simple effect
    getter = () => {
      if (instance && instance.isUnmounted) {
        // 组件已经卸载了
        return;
      }

      if (cleanup) cleanup();

      return callWithErrorHandling(
        source,
        instance,
        ErrorCodes.WATCH_CALLBACK,
        [onInvalidate]
      );
    };
  }
}

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

const job: SchedulerJob = () => {
  if (cb) {
    // watch(source, cb)
    const newValue = runner();
    if (deep || forceTrigger || hasChanged(newValue, oldValue)) {
      // cleanup
      if (cleanup) cleanup();
      callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
        newValue,
        // pass undefined as the old value when it's changed for the first time
        // 第一次的时候 oldValue 为 undefined
        oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
        onInvalidate,
      ]);
      oldValue = newValue;
    }
  } else {
    // watchEffect, no cb
    runner();
  }
};

1
2
3
4
5
6
7
8

 // 3. cb + deep: true
 if (cb && deep) {
   const baseGetter = getter;
   // a. deep: true

   // b. source is reactive
   getter = () => traverse(baseGetter());
 }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

if (cb) {
  if (immediate) {
    job(); // 这里直接调用 Job
  } else {
    oldValue = runner();
  }
} else if (false /*flush->post*/) {
} else {
  runner();
}

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

// 1. cb, immediate, deep 检测
if (__DEV__ && !cb) {
  if (immediate !== undefined) {
    warn(
      `watch() "immediate" option is only respected when using the ` +
        `watch(source, callback, options?) signature.`
    );
  }
  if (deep !== undefined) {
    warn(
      `watch() "deep" option is only respected when using the ` +
        `watch(source, callback, options?) signature.`
    );
  }
}

 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

// track() 函授最后 add 操作之后
if (!dep.has(activeEffect)) {
  dep.add(activeEffect);
  // 自身保存一份被依赖者名单
  activeEffect.deps.push(dep);
  if (__DEV__ && activeEffect.options.onTrack) {
    activeEffect.options.onTrack({
      effect: activeEffect,
      target,
      type,
      key,
    });
  }
}

// trigger() 函数中实现
if (effect.options.onTrigger) {
  effect.options.onTrigger({
    effect,
    target,
    key,
    type,
    newValue,
    oldValue,
    oldTarget,
  });
}

1
2
3
4
5
6
7

// 9. return runner->stop, remove runner from instance.effects
return () => {
  stop(runner);
  if (instance) {
    remove(instance.effects!, runner);
  }
};