Vue 发展史

问题：Vue 1 的属性级 Watcher 数量爆炸，内存开销巨大

Vue 1: 每个响应式属性 → 一个 Watcher → 直接绑定 DOM → 几千个 Watcher → 内存爆炸

解决：Vue 2 引入虚拟 DOM + 组件级 Watcher

Vue 2: 每个组件 → 一个 Watcher → 数据变化触发组件重渲染 → diff 算法计算最小 DOM 操作

┌───────────────────────────────────────┐
│        Vue 2 的三大痛点                 │
│  1. defineProperty 无法检测新增/删除属性  │
│  2. Options API 逻辑碎片化              │
│  3. TypeScript 支持差                   │
└─────────────────┬─────────────────────┘
                  │ Vue 3 重构
                  ▼
┌───────────────────────────────────────┐
│        Vue 3 的三大解法                 │
│  1. Proxy 代理整个对象                  │
│  2. Composition API 逻辑聚合            │
│  3. TypeScript 原生重写                 │
└───────────────────────────────────────┘

// Options API：搜索功能的代码分散在不同选项中
export default {
  data() {
    return { query: "", results: [] };
  },
  methods: {
    search() {
      /* ... */
    },
  },
  watch: {
    // Vue 没有内置 debounce 选项，需要自己用工具函数包裹
    query: debounce(function () {
      this.search();
    }, 300),
  },
  computed: {
    hasResults() {
      return this.results.length > 0;
    },
  },
};

// Composition API：搜索功能的代码物理聚合
function useSearch() {
  const query = ref("");
  const results = ref([]);
  const search = debounce(() => {
    /* ... */
  }, 300);
  watch(query, search);
  const hasResults = computed(() => results.value.length > 0);
  return { query, results, search, hasResults };
}
// 核心调度：从"按选项分类"变成"按功能聚合"

// Vue 2 的 defineReactive 函数（简化）
function defineReactive(obj, key, val) {
  const dep = new Dep(); // 每个属性一个 dep

  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) {
        dep.depend(); // 收集依赖：把当前 Watcher 加入 dep
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // 触发更新：通知所有 Watcher
    },
  });
}

// Vue 3 的 reactive 函数（简化）
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key); // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      trigger(target, key); // 删除属性也触发更新
      return result;
    },
  });
}

┌──────────────┐   ┌──────────────┐   ┌──────────────┐
│   Vue 1.x    │ → │   Vue 2.x    │ → │   Vue 3.x    │
│  2014-2016   │   │  2016-2020   │   │  2020-至今    │
│              │   │              │   │              │
│ 绑定级 Watcher│   │ 组件级 Watcher│   │ 编译时优化    │
│ defineProperty│   │ 虚拟 DOM     │   │ Proxy        │
│ 简单但内存爆炸│   │ diff 算法    │   │ Composition API│
└──────────────┘   └──────────────┘   └──────────────┘

数据变化 → 属性的 setter 触发 → dep.notify() → Watcher 更新 → 精准 DOM 操作

┌───────────────────────────────────────┐
│        Vue 2 的三大痛点                 │
│  1. defineProperty 的响应式盲区         │
│  2. Options API 的逻辑碎片化           │
│  3. Flow 类型检查的局限性              │
└─────────────────┬─────────────────────┘
                  │ Vue 3 重构
                  ▼
┌───────────────────────────────────────┐
│        Vue 3 的三大解法                 │
│  1. Proxy 拦截整个对象                  │
│  2. Composition API 逻辑聚合            │
│  3. TypeScript 从头重写                │
└───────────────────────────────────────┘