第一步

packages/runtime-core/src/renderer.ts

export function createRenderer(renderOptions) {
  const mountComponent = (n1, n2, container, anchor) => {
      // 组件可以基于自己的状态重新渲染
      const {
        data = () => {
        }, render
      } = n2.type;

      // 组件的状态
      const state = reactive(data());

      const instance = {
        state,
        vnode: n2,
        subTree: null,
        isMounted: false,
        update: null
      };

      const componentUpdateFn = () => {
        if (!instance.isMounted) {
          const subTree = render.call(state, state);
          patch(null, subTree, container, anchor);
          instance.isMounted = true;
          instance.subTree = subTree;
        } else {
          const subTree = render.call(state, state);
          patch(instance.subTree, subTree, container, anchor);

        }
      };
      const effect = new ReactiveEffect(componentUpdateFn, () => queueJob(update));

      const update = (instance.update = () => {
        effect.run();
      });
      update();
   };
}

packages/runtime-core/src/scheduler.ts

// 或存当前要执行的队列
const queue = [];
let isFlushing = false;
const resolvePromise = Promise.resolve();

// 如果同时在一个组件中更新多个状态，job 肯定是同一个
export function queueJob(job) {
  console.log(job);
  if (!queue.includes(job)) {
    queue.push(job);
  }

  if (!isFlushing) {
    isFlushing = true;

    resolvePromise.then(() => {
      isFlushing = false;

      const copy = queue.slice(0);
      queue.length = 0;

      copy.forEach((job) => job());
      copy.length = 0;
    });
  }
}