1
const target = { count: 0 };
2
const proxy = new Proxy(target, {
3
  get(target, key, receiver) {
4
    console.log(`读取 ${key}`);
5
    return Reflect.get(target, key, receiver);
6
  },
7
  set(target, key, value, receiver) {
8
    console.log(`设置 ${key} = ${value}`);
9
    return Reflect.set(target, key, value, receiver);
10
  },
11
});
12

13
proxy.count; // 读取 count
14
proxy.count = 1; // 设置 count = 1

1
// 简化实现
2
function reactive(target) {
3
  return new Proxy(target, reactiveHandlers);
4
}
5

6
const reactiveHandlers = {
7
  get(target, key, receiver) {
8
    const res = Reflect.get(target, key, receiver);
9

10
    // 依赖收集
11
    track(target, key);
12

13
    // 深层响应式
14
    if (isObject(res)) {
15
      return reactive(res);
16
    }
17

18
    return res;
19
  },
20

21
  set(target, key, value, receiver) {
22
    const oldValue = target[key];
23
    const res = Reflect.set(target, key, value, receiver);
24

25
    if (oldValue !== value) {
26
      // 触发更新
27
      trigger(target, key);
28
    }
29

30
    return res;
31
  },
32

33
  deleteProperty(target, key) {
34
    const res = Reflect.deleteProperty(target, key);
35
    trigger(target, key);
36
    return res;
37
  },
38
};

1
// 全局依赖栈
2
let activeEffect = null;
3
const targetMap = new WeakMap();
4

5
// 依赖收集
6
function track(target, key) {
7
  if (!activeEffect) return;
8

9
  // 获取目标对象的依赖映射
10
  let depsMap = targetMap.get(target);
11
  if (!depsMap) {
12
    targetMap.set(target, (depsMap = new Map()));
13
  }
14

15
  // 获取属性的依赖集合
16
  let dep = depsMap.get(key);
17
  if (!dep) {
18
    depsMap.set(key, (dep = new Set()));
19
  }
20

21
  // 添加当前副作用
22
  dep.add(activeEffect);
23
}
24

25
// 触发更新
26
function trigger(target, key) {
27
  const depsMap = targetMap.get(target);
28
  if (!depsMap) return;
29

30
  const dep = depsMap.get(key);
31
  if (dep) {
32
    dep.forEach(effect => effect.run());
33
  }
34
}

1
class ReactiveEffect {
2
  constructor(fn, scheduler = null) {
3
    this.fn = fn;
4
    this.scheduler = scheduler;
5
    this.deps = []; // 反向依赖
6
  }
7

8
  run() {
9
    // 保存上一个 effect
10
    const parent = activeEffect;
11
    activeEffect = this;
12

13
    try {
14
      return this.fn();
15
    } finally {
16
      // 恢复
17
      activeEffect = parent;
18
    }
19
  }
20

21
  stop() {
22
    // 从所有依赖中移除
23
    this.deps.forEach(dep => dep.delete(this));
24
  }
25
}
26

27
function effect(fn, options = {}) {
28
  const _effect = new ReactiveEffect(fn, options.scheduler);
29

30
  // 立即执行一次
31
  _effect.run();
32

33
  // 返回 runner
34
  const runner = _effect.run.bind(_effect);
35
  runner.effect = _effect;
36
  return runner;
37
}

1
function computed(getter) {
2
  let value;
3
  let dirty = true;
4

5
  const effect = new ReactiveEffect(getter, () => {
6
    if (!dirty) {
7
      dirty = true;
8
      trigger(computed, "value");
9
    }
10
  });
11

12
  const computed = {
13
    get value() {
14
      if (dirty) {
15
        value = effect.run();
16
        dirty = false;
17
      }
18
      track(computed, "value");
19
      return value;
20
    },
21
  };
22

23
  return computed;
24
}

1
function watch(source, cb, options = {}) {
2
  let getter;
3
  if (isReactive(source)) {
4
    getter = () => traverse(source);
5
  } else if (isFunction(source)) {
6
    getter = source;
7
  }
8

9
  let oldValue;
10
  let cleanup;
11

12
  const onCleanup = fn => {
13
    cleanup = fn;
14
  };
15

16
  const job = () => {
17
    const newValue = effect.run();
18
    if (cleanup) cleanup();
19
    cb(newValue, oldValue, onCleanup);
20
    oldValue = newValue;
21
  };
22

23
  const effect = new ReactiveEffect(getter, job);
24
  oldValue = effect.run();
25
}
26

27
// 深度遍历
28
function traverse(value, seen = new Set()) {
29
  if (!isObject(value) || seen.has(value)) return;
30
  seen.add(value);
31

32
  for (const key in value) {
33
    traverse(value[key], seen);
34
  }
35

36
  return value;
37
}

1
const queue = [];
2
let isFlushing = false;
3
let isFlushPending = false;
4
const resolvedPromise = Promise.resolve();
5

6
function queueJob(job) {
7
  if (!queue.includes(job)) {
8
    queue.push(job);
9
    queueFlush();
10
  }
11
}
12

13
function queueFlush() {
14
  if (!isFlushing && !isFlushPending) {
15
    isFlushPending = true;
16
    resolvedPromise.then(flushJobs);
17
  }
18
}
19

20
function flushJobs() {
21
  isFlushPending = false;
22
  isFlushing = true;
23

24
  // 按优先级排序（父组件先更新）
25
  queue.sort((a, b) => a.id - b.id);
26

27
  try {
28
    for (let i = 0; i < queue.length; i++) {
29
      queue[i]();
30
    }
31
  } finally {
32
    queue.length = 0;
33
    isFlushing = false;
34
  }
35
}

1
const p = Promise.resolve();
2

3
function nextTick(fn) {
4
  return fn ? p.then(fn) : p;
5
}
6

7
// 使用示例
8
this.count++;
9
this.count++;
10
this.count++;
11
// 组件只更新一次
12

13
this.$nextTick(() => {
14
  console.log("DOM 已更新");
15
});

1
const pendingPreFlushCbs = [];
2
const pendingPostFlushCbs = [];
3

4
// 前置钩子（更新前执行）
5
function queuePreFlushCb(cb) {
6
  queueCb(cb, pendingPreFlushCbs);
7
}
8

9
// 后置钩子（更新后执行）
10
function queuePostFlushCb(cb) {
11
  queueCb(cb, pendingPostFlushCbs);
12
}
13

14
// watchEffect 使用前置调度
15
watchEffect(
16
  () => {
17
    console.log("数据变化了");
18
  },
19
  {
20
    flush: "pre", // 'pre' | 'post' | 'sync'
21
  }
22
);

1
// VNode 结构（简化）
2
const vnode = {
3
  type: "div", // 标签名或组件
4
  props: {
5
    // 属性
6
    id: "app",
7
    class: "container",
8
  },
9
  children: [
10
    // 子节点
11
    { type: "span", children: "Hello" },
12
  ],
13
  key: null, // key
14
  ref: null, // ref
15
  el: null, // 实际 DOM 元素
16
  shapeFlag: 0, // 节点类型标记
17
  patchFlag: 0, // 更新标记（优化用）
18
};

1
function h(type, propsOrChildren, children) {
2
  const l = arguments.length;
3

4
  if (l === 2) {
5
    if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
6
      // h('div', { props })
7
      if (isVNode(propsOrChildren)) {
8
        return createVNode(type, null, [propsOrChildren]);
9
      }
10
      return createVNode(type, propsOrChildren);
11
    } else {
12
      // h('div', children)
13
      return createVNode(type, null, propsOrChildren);
14
    }
15
  } else {
16
    if (l > 3) {
17
      children = Array.prototype.slice.call(arguments, 2);
18
    } else if (l === 3 && isVNode(children)) {
19
      children = [children];
20
    }
21
    return createVNode(type, propsOrChildren, children);
22
  }
23
}

1
function patch(n1, n2, container, anchor = null) {
2
  // 类型不同，直接卸载重建
3
  if (n1 && !isSameVNodeType(n1, n2)) {
4
    unmount(n1);
5
    n1 = null;
6
  }
7

8
  const { type, shapeFlag } = n2;
9

10
  switch (type) {
11
    case Text:
12
      processText(n1, n2, container);
13
      break;
14
    case Comment:
15
      processComment(n1, n2, container);
16
      break;
17
    case Fragment:
18
      processFragment(n1, n2, container);
19
      break;
20
    default:
21
      if (shapeFlag & ShapeFlags.ELEMENT) {
22
        processElement(n1, n2, container, anchor);
23
      } else if (shapeFlag & ShapeFlags.COMPONENT) {
24
        processComponent(n1, n2, container, anchor);
25
      }
26
  }
27
}

1
function mountElement(vnode, container, anchor) {
2
  const { type, props, shapeFlag } = vnode;
3

4
  // 创建 DOM 元素
5
  const el = (vnode.el = document.createElement(type));
6

7
  // 设置属性
8
  if (props) {
9
    for (const key in props) {
10
      patchProp(el, key, null, props[key]);
11
    }
12
  }
13

14
  // 处理子节点
15
  if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
16
    el.textContent = vnode.children;
17
  } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
18
    mountChildren(vnode.children, el);
19
  }
20

21
  // 插入 DOM
22
  container.insertBefore(el, anchor);
23
}

1
function patchProp(el, key, prevValue, nextValue) {
2
  if (key === "class") {
3
    patchClass(el, nextValue);
4
  } else if (key === "style") {
5
    patchStyle(el, prevValue, nextValue);
6
  } else if (isOn(key)) {
7
    patchEvent(el, key, prevValue, nextValue);
8
  } else {
9
    patchAttr(el, key, nextValue);
10
  }
11
}
12

13
// 类名处理
14
function patchClass(el, value) {
15
  if (value == null) {
16
    el.removeAttribute("class");
17
  } else {
18
    el.className = value;
19
  }
20
}
21

22
// 事件处理
23
function patchEvent(el, key, prevValue, nextValue) {
24
  const invokers = el._vei || (el._vei = {});
25
  const existingInvoker = invokers[key];
26

27
  if (nextValue && existingInvoker) {
28
    // 更新事件
29
    existingInvoker.value = nextValue;
30
  } else {
31
    const name = key.slice(2).toLowerCase();
32

33
    if (nextValue) {
34
      // 添加事件
35
      const invoker = (invokers[key] = createInvoker(nextValue));
36
      el.addEventListener(name, invoker);
37
    } else {
38
      // 移除事件
39
      el.removeEventListener(name, existingInvoker);
40
      invokers[key] = undefined;
41
    }
42
  }
43
}

1
function patchKeyedChildren(c1, c2, container) {
2
  let i = 0;
3
  const l2 = c2.length;
4
  let e1 = c1.length - 1;
5
  let e2 = l2 - 1;
6

7
  // 1. 从头部开始同步
8
  while (i <= e1 && i <= e2) {
9
    if (isSameVNodeType(c1[i], c2[i])) {
10
      patch(c1[i], c2[i], container);
11
    } else {
12
      break;
13
    }
14
    i++;
15
  }
16

17
  // 2. 从尾部开始同步
18
  while (i <= e1 && i <= e2) {
19
    if (isSameVNodeType(c1[e1], c2[e2])) {
20
      patch(c1[e1], c2[e2], container);
21
    } else {
22
      break;
23
    }
24
    e1--;
25
    e2--;
26
  }
27

28
  // 3. 新增节点
29
  if (i > e1) {
30
    if (i <= e2) {
31
      const nextPos = e2 + 1;
32
      const anchor = nextPos < l2 ? c2[nextPos].el : null;
33
      while (i <= e2) {
34
        patch(null, c2[i], container, anchor);
35
        i++;
36
      }
37
    }
38
  }
39

40
  // 4. 删除节点
41
  else if (i > e2) {
42
    while (i <= e1) {
43
      unmount(c1[i]);
44
      i++;
45
    }
46
  }
47

48
  // 5. 复杂情况：移动/新增/删除混合
49
  else {
50
    // ...使用最长递增子序列
51
  }
52
}

1
function getSequence(arr) {
2
  const p = arr.slice();
3
  const result = [0];
4
  let i, j, u, v, c;
5
  const len = arr.length;
6

7
  for (i = 0; i < len; i++) {
8
    const arrI = arr[i];
9
    if (arrI !== 0) {
10
      j = result[result.length - 1];
11
      if (arr[j] < arrI) {
12
        p[i] = j;
13
        result.push(i);
14
        continue;
15
      }
16

17
      u = 0;
18
      v = result.length - 1;
19
      while (u < v) {
20
        c = ((u + v) / 2) | 0;
21
        if (arr[result[c]] < arrI) {
22
          u = c + 1;
23
        } else {
24
          v = c;
25
        }
26
      }
27

28
      if (arrI < arr[result[u]]) {
29
        if (u > 0) {
30
          p[i] = result[u - 1];
31
        }
32
        result[u] = i;
33
      }
34
    }
35
  }
36

37
  u = result.length;
38
  v = result[u - 1];
39
  while (u-- > 0) {
40
    result[u] = v;
41
    v = p[v];
42
  }
43

44
  return result;
45
}

1
const componentOptions = {
2
  props: { count: Number },
3
  data() {
4
    return { local: 0 };
5
  },
6
  computed: {
7
    double() {
8
      return this.count * 2;
9
    },
10
  },
11
  methods: {
12
    increment() {
13
      this.local++;
14
    },
15
  },
16
  render() {
17
    return h("div", this.local);
18
  },
19
};
20

21
// 组件实例结构
22
const instance = {
23
  vnode, // 组件 VNode
24
  type, // 组件选项
25
  props, // props 对象
26
  attrs, // 非 prop 属性
27
  state, // data 响应式数据
28
  render, // 渲染函数
29
  subTree, // 渲染的子树
30
  ctx, // 上下文对象
31
  proxy, // 代理对象（this 指向）
32
  isMounted, // 是否已挂载
33
  bc: null, // beforeCreate 钩子
34
  c: null, // created 钩子
35
  bm: null, // beforeMount 钩子
36
  m: null, // mounted 钩子
37
  bu: null, // beforeUpdate 钩子
38
  u: null, // updated 钩子
39
  um: null, // unmounted 钩子
40
};

1
// 组合式 API
2
export default {
3
  props: { count: Number },
4
  setup(props, { emit, slots, attrs }) {
5
    // 创建响应式数据
6
    const local = ref(0);
7

8
    // 计算属性
9
    const double = computed(() => local.value * 2);
10

11
    // 方法
12
    const increment = () => {
13
      local.value++;
14
      emit("change", local.value);
15
    };
16

17
    // 生命周期
18
    onMounted(() => {
19
      console.log("mounted");
20
    });
21

22
    // 返回渲染函数或对象
23
    return () => h("div", local.value);
24
    // 或
25
    return { local, double, increment };
26
  },
27
};

1
// 模板
2
<div class="static" :class="dynamic">{{ text }}</div>
3

4
// 生成的渲染代码
5
_createVNode("div", {
6
  class: ["static", _ctx.dynamic],
7
  textContent: _ctx.text
8
}, null, PatchFlags.PROPS | PatchFlags.TEXT);
9

10
// PatchFlags
11
export const enum PatchFlags {
12
  TEXT = 1,           // 动态文本
13
  CLASS = 2,          // 动态 class
14
  STYLE = 4,          // 动态 style
15
  PROPS = 8,          // 动态属性
16
  FULL_PROPS = 16,    // 有动态 key 的属性
17
  HYDRATE_EVENTS = 32, // 有事件监听器
18
  STABLE_FRAGMENT = 64, // 稳定的 fragment
19
  KEYED_FRAGMENT = 128, // 有 key 的 fragment
20
  UNKEYED_FRAGMENT = 256, // 无 key 的 fragment
21
  NEED_PATCH = 512,   // 需要非 props 比较
22
  DYNAMIC_SLOTS = 1024, // 动态插槽
23
  HOISTED = -1,       // 静态提升的节点
24
  BAIL = -2           // 退出优化
25
}

1
// 模板
2
<div>
3
  <span class="static">静态内容</span>
4
  <span>{{ dynamic }}</span>
5
</div>;
6

7
// 静态提升
8
const _hoisted_1 = /*#__PURE__*/ _createVNode(
9
  "span",
10
  { class: "static" },
11
  "静态内容",
12
  -1
13
);
14

15
function render() {
16
  return _createVNode("div", null, [
17
    _hoisted_1, // 复用静态节点
18
    _createVNode("span", null, _ctx.dynamic, 0),
19
  ]);
20
}

1
// 模板
2
<button @click="count++">{{ count }}</button>
3

4
// 编译结果
5
export function render(_ctx) {
6
  return (_openBlock(), _createBlock("button", {
7
    onClick: _cache[0] || (_cache[0] = (...args) =>
8
      (_ctx.count++ && _ctx.count++(...args)))
9
  }, _toDisplayString(_ctx.count), 1))
10
}

1
Inspector 面板:
2
├── 组件树
3
├── 组件状态（data, props, computed）
4
├── Pinia 状态
5
└── 路由信息
6

7
Timeline 面板:
8
├── 组件事件
9
├── 性能分析
10
├── 路由变化
11
└── Pinia mutations

1
// 开发模式下开启性能追踪
2
app.config.performance = true;
3

4
// 自定义性能追踪
5
import { performance } from "perf_hooks";
6

7
const start = performance.now();
8
// ...渲染操作
9
const end = performance.now();
10
console.log(`渲染耗时: ${end - start}ms`);