// ============ Vue2 响应式的最小可运行实现 ============

// Dep：一个属性对应一个 Dep，负责收集依赖它的 Watcher
class Dep {
  static target = null; // 全局唯一，指向"当前正在求值的 Watcher"
  constructor() {
    this.subs = [];
  }
  depend() {
    if (Dep.target) this.subs.push(Dep.target); // 实际实现里会去重
  }
  notify() {
    this.subs.slice().forEach((w) => w.update());
  }
}

// Watcher：一个"会读取数据的副作用"（渲染函数、computed、watch 回调）
class Watcher {
  constructor(getter, cb) {
    this.getter = getter;
    this.cb = cb;
    this.get(); // 立即求值一次，触发依赖收集
  }
  get() {
    Dep.target = this;        // 把自己挂到全局，让 getter 能拿到
    const value = this.getter();
    Dep.target = null;        // 收集完立刻清空，避免误收集
    return value;
  }
  update() {
    this.cb(this.get());
  }
}

// defineReactive：把一个属性改写成 getter/setter
function defineReactive(obj, key, val) {
  observe(val);               // 递归：嵌套对象也要变成响应式（初始化就要走完整棵树）
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      dep.depend();           // ① 依赖收集
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      observe(newVal);        // 新赋的值如果是对象，也要变成响应式
      dep.notify();           // ② 派发更新
    },
  });
}

function observe(obj) {
  if (obj === null || typeof obj !== 'object') return;
  // ⚠️ 必须在初始化时就遍历所有 key —— 这是 Vue2 性能开销和「新增属性不响应」的根源
  Object.keys(obj).forEach((key) => defineReactive(obj, key, obj[key]));
}

// ---------- 验证 ----------
const data = { count: 0, user: { name: 'vue2' } };
observe(data);
new Watcher(() => data.count, (v) => console.log('count 变为', v));
data.count = 1;      // ✅ 输出：count 变为 1
data.newKey = 'x';   // ❌ 无任何反应 —— newKey 从未被 defineProperty 处理过

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach((method) => {
  const original = arrayProto[method];
  Object.defineProperty(arrayMethods, method, {
    value: function mutator(...args) {
      const result = original.apply(this, args);
      const ob = this.__ob__;
      // push/unshift/splice 新增进来的元素也要变成响应式
      let inserted;
      if (method === 'push' || method === 'unshift') inserted = args;
      else if (method === 'splice') inserted = args.slice(2);
      if (inserted) ob.observeArray(inserted);
      ob.dep.notify(); // 手动通知
      return result;
    },
  });
});

this.list[0] = newValue;      // ❌ 不触发
this.list.length = 0;         // ❌ 不触发
this.$set(this.list, 0, val); // ✅
this.list.splice(0, 1, val);  // ✅
this.list.splice(0);          // ✅ 清空数组的正确写法

// ============ Vue3 响应式的最小可运行实现 ============

// 依赖存储结构：WeakMap<target, Map<key, Set<effect>>>
// 用 WeakMap 是为了让 target 被回收时依赖也自动回收，避免内存泄漏
const targetMap = new WeakMap();
let activeEffect = null;
const effectStack = []; // 支持嵌套 effect（组件嵌套渲染）

function effect(fn) {
  const run = () => {
    try {
      effectStack.push(run);
      activeEffect = run;
      return fn();
    } finally {
      effectStack.pop();
      activeEffect = effectStack[effectStack.length - 1] || null;
    }
  };
  run();
  return run;
}

function track(target, key) {
  if (!activeEffect) return;
  let depsMap = targetMap.get(target);
  if (!depsMap) targetMap.set(target, (depsMap = new Map()));
  let dep = depsMap.get(key);
  if (!dep) depsMap.set(key, (dep = new Set()));
  dep.add(activeEffect); // Set 天然去重
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  // 复制一份再遍历，避免遍历过程中 effect 重新收集依赖造成无限循环
  if (dep) [...dep].forEach((e) => e !== activeEffect && e());
}

const reactiveMap = new WeakMap(); // 缓存：同一个对象多次 reactive 返回同一个代理

function reactive(target) {
  if (target === null || typeof target !== 'object') return target;
  if (reactiveMap.has(target)) return reactiveMap.get(target);

  const proxy = new Proxy(target, {
    get(obj, key, receiver) {
      // Reflect 保证 this 指向代理对象，这样 getter 里访问的其他属性也能被收集
      const res = Reflect.get(obj, key, receiver);
      track(obj, key);
      // ★ 惰性代理：只有真正读到这个嵌套对象时，才把它转成响应式
      //   对比 Vue2 初始化就递归整棵树，这是 Vue3 初始化性能提升的关键
      return typeof res === 'object' && res !== null ? reactive(res) : res;
    },
    set(obj, key, value, receiver) {
      const hadKey = Object.prototype.hasOwnProperty.call(obj, key);
      const oldValue = obj[key];
      const res = Reflect.set(obj, key, value, receiver);
      if (!hadKey) {
        trigger(obj, key);            // ✅ 新增属性也能触发！Vue2 做不到
      } else if (!Object.is(oldValue, value)) {
        trigger(obj, key);
      }
      return res;
    },
    deleteProperty(obj, key) {        // ✅ delete 也能触发！Vue2 需要 $delete
      const hadKey = Object.prototype.hasOwnProperty.call(obj, key);
      const res = Reflect.deleteProperty(obj, key);
      if (hadKey && res) trigger(obj, key);
      return res;
    },
    has(obj, key) {                   // ✅ 拦截 in 操作符
      track(obj, key);
      return Reflect.has(obj, key);
    },
    ownKeys(obj) {                    // ✅ 拦截 for...in / Object.keys
      track(obj, Array.isArray(obj) ? 'length' : Symbol('iterate'));
      return Reflect.ownKeys(obj);
    },
  });

  reactiveMap.set(target, proxy);
  return proxy;
}

// ---------- 验证 ----------
const state = reactive({ count: 0, list: [1, 2] });
effect(() => console.log('render:', state.count, state.list.length));
state.count = 1;     // ✅ 触发
state.newKey = 'x';  // ✅ 触发（Vue2 不行）
state.list[0] = 99;  // ✅ 触发（Vue2 不行）
state.list.push(3);  // ✅ 触发，无需重写数组方法
delete state.count;  // ✅ 触发（Vue2 不行）

const obj = {
  _name: 'vue',
  get name() {
    return this._name; // ← 这里的 this
  },
};
// 用 obj[key]：getter 里的 this 是原始对象 obj，读 _name 不会经过 Proxy → 依赖收集不到 _name
// 用 Reflect.get(obj, key, receiver)：receiver 是 Proxy，getter 里的 this 指向 Proxy → _name 也被收集

class RefImpl {
  constructor(value) {
    this._rawValue = value;
    // 对象类型的 ref，内部还是用 reactive 包一层
    this._value = typeof value === 'object' && value !== null ? reactive(value) : value;
    this.dep = new Set();
    this.__v_isRef = true; // 标记位，模板自动解包和 unref 都靠它
  }
  get value() {
    trackRefValue(this);
    return this._value;
  }
  set value(newVal) {
    if (Object.is(newVal, this._rawValue)) return;
    this._rawValue = newVal;
    this._value = typeof newVal === 'object' && newVal !== null ? reactive(newVal) : newVal;
    triggerRefValue(this);
  }
}

       Model (响应式数据)
          ↕
   ┌──── ViewModel (Vue 实例) ────┐
   │  响应式系统：Proxy + track/trigger │
   │  编译器：template → render 函数    │
   │  渲染器：vnode → patch → 真实 DOM  │
   └──────────────────────────────┘
          ↕
       View (DOM)

完整更新链路：
① 组件初始化：setup() 建立响应式数据
② 挂载：创建 ReactiveEffect（渲染 effect），执行 render 函数
   → 读取响应式数据 → 触发 getter → track 收集：这个组件的渲染 effect 依赖了这些属性
   → 得到 vnode 树 → patch → 创建真实 DOM
③ 数据变更：setter → trigger → 找到依赖这个属性的所有 effect
④ 调度：不立即执行，而是 queueJob 推入微任务队列去重（同一个组件的多次修改只渲染一次）
⑤ 微任务 flush：重新执行渲染 effect → 生成新 vnode → 与旧 vnode diff → 最小化更新真实 DOM

// ============ hash 模式的最小实现 ============
class HashHistory {
  constructor() {
    this.listeners = [];
    // hashchange 是浏览器原生事件，改 hash 一定会触发
    window.addEventListener('hashchange', () => {
      this.notify(this.current);
    });
    // 首次进入时如果没有 hash，补一个默认值
    if (!window.location.hash) window.location.hash = '#/';
  }
  get current() {
    return window.location.hash.slice(1) || '/';
  }
  push(path) {
    window.location.hash = path;       // 会触发 hashchange，会写入历史记录
  }
  replace(path) {
    // 用 replaceState 改 hash，不新增历史记录（不触发 hashchange，需手动 notify）
    const href = window.location.href.replace(/#.*$/, '') + '#' + path;
    window.location.replace(href);
  }
  notify(path) {
    this.listeners.forEach((fn) => fn(path));
  }
}

// ============ history 模式的最小实现 ============
class HTML5History {
  constructor(base = '') {
    this.base = base;
    this.listeners = [];
    // ⚠️ popstate 只在「浏览器前进/后退」或 history.go/back/forward 时触发，
    //    调用 pushState/replaceState 本身不会触发 popstate，所以要手动 notify
    window.addEventListener('popstate', () => this.notify(this.current));
  }
  get current() {
    return window.location.pathname.slice(this.base.length) + window.location.search;
  }
  push(path) {
    // pushState(state, unused, url)：改变 URL 但不发起任何网络请求、不刷新页面
    window.history.pushState({ key: Date.now() }, '', this.base + path);
    this.notify(path); // 手动通知，因为 pushState 不触发 popstate
  }
  replace(path) {
    window.history.replaceState({ key: Date.now() }, '', this.base + path);
    this.notify(path);
  }
  notify(path) {
    this.listeners.forEach((fn) => fn(path));
  }
}

server {
  listen 80;
  server_name a.com;
  root /var/www/dist;

  location / {
    # 依次尝试：当前路径的文件 → 当前路径的目录 → 兜底返回 index.html
    # 这一行是 history 模式能工作的全部秘密
    try_files $uri $uri/ /index.html;
  }

  # 静态资源单独处理：带 hash 的文件名可以长缓存
  location ~* \.(js|css|png|jpg|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # ⚠️ index.html 绝对不能长缓存，否则发版后用户拿到旧的 html 引用旧的 js
  location = /index.html {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
  }
}

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

const history = require('connect-history-api-fallback');
app.use(history());
app.use(express.static('dist'));

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';

const router = createRouter({
  // 部署在子路径 https://a.com/admin/ 时，base 要传 '/admin/'
  // Vite 项目可以直接用 import.meta.env.BASE_URL（对应 vite.config 的 base）
  history: createWebHistory(import.meta.env.BASE_URL),
  // history: createWebHashHistory(),  // hash 模式
  routes: [
    { path: '/user/:id', component: () => import('@/views/User.vue') },
    // 404 兜底路由：注意 history 模式下服务端已经 fallback 到 index.html，
    // 真正的 404 判断在前端做
    { path: '/:pathMatch(.*)*', component: () => import('@/views/NotFound.vue') },
  ],
});

旧: [A, B, C, D, E, F, G]
新: [A, B, E, C, D, H, F, G]

① 前序同步（i 从头往后，遇到不同就停）
   A、B 相同 → patch，i = 2

② 后序同步（e1/e2 从尾往前，遇到不同就停）
   G、F 相同 → patch，e1 = 4(E), e2 = 5(H)

③ 旧的走完了、新的还有剩 → 全部挂载（mount）
④ 新的走完了、旧的还有剩 → 全部卸载（unmount）

⑤ 都有剩余（未知乱序序列）：i..e1 是旧的剩余 [C,D,E]，i..e2 是新的剩余 [E,C,D,H]
   a. 为新的剩余段建立 keyToNewIndexMap: { E:2, C:3, D:4, H:5 }
   b. 建立 newIndexToOldIndexMap = [0,0,0,0]（长度=新剩余段长度，0 表示"新增节点"）
   c. 遍历旧的剩余段，用 key 去 map 里找对应的新位置：
      C → 新位置 3，记录 newIndexToOldIndexMap[3-i] = 旧下标+1
      D → 新位置 4，记录 ...
      E → 新位置 2，记录 ...
      同时用 maxNewIndexSoFar 判断是否出现"逆序" → moved = true
      旧的剩余里在新的 map 中找不到的 → unmount
   d. moved 为 true 时，对 newIndexToOldIndexMap 求最长递增子序列（LIS）
      LIS 中的节点 = 相对顺序本来就对的，不需要移动
   e. 从后往前遍历新的剩余段：
      - newIndexToOldIndexMap[i] === 0 → 新节点，mount
      - 下标不在 LIS 中 → move（insertBefore 到锚点前）
      - 下标在 LIS 中 → 什么都不做
      （从后往前是为了保证锚点节点已经就位）

// runtime-core/src/vnode.ts
export function isSameVNodeType(n1, n2) {
  return n1.type === n2.type && n1.key === n2.key;
}

// runtime-core/src/renderer.ts —— patch 的入口判断
const patch = (n1, n2, container, anchor) => {
  if (n1 && !isSameVNodeType(n1, n2)) {
    // 类型或 key 不同 → 不复用，直接卸载旧的
    unmount(n1);
    n1 = null;         // 后续走 mount 分支，创建全新的 DOM / 组件实例
  }
  // ... 相同则走 patchElement / patchComponent，复用 DOM 和组件实例
};

<script setup>
import { ref } from 'vue';
const list = ref([
  { id: 1, name: 'B' },
  { id: 2, name: 'C' },
]);
const prepend = () => list.value.unshift({ id: 3, name: 'A' });
</script>

<template>
  <button @click="prepend">头部插入</button>
  <!-- 纯展示，li 内部没有任何本地状态 -->
  <li v-for="(item, index) in list" :key="index">{{ item.name }}</li>
</template>

旧 vnode: [key=0 文本'B', key=1 文本'C']
新 vnode: [key=0 文本'A', key=1 文本'B', key=2 文本'C']

前序同步：key=0 相同 → patch，文本 'B' → 'A'   （1 次文本更新）
          key=1 相同 → patch，文本 'C' → 'B'   （1 次文本更新）
后序同步：无
旧的走完 → 挂载 key=2 的新节点 'C'             （1 次 DOM 创建 + 插入）

总计：2 次文本更新 + 1 次插入

前序同步：key=3 vs key=1，不同，立即停止（i=0）
后序同步：key=2 vs key=2 相同 → patch（无变化）
          key=1 vs key=1 相同 → patch（无变化）
旧的走完（e1 < i）→ 挂载 key=3 的新节点 'A' 到头部

总计：1 次插入，B 和 C 的 DOM 完全没被碰过

<script setup>
import { ref } from 'vue';

const list = ref([
  { id: 1, name: '写周报' },
  { id: 2, name: '改 bug' },
]);
const prepend = () => list.value.unshift({ id: 3, name: '开会' });
</script>

<template>
  <button @click="prepend">头部插入</button>
  <div v-for="(item, index) in list" :key="index">
    <span>{{ item.name }}</span>
    <!-- ① 非受控 input：用户输入的值存在真实 DOM 上，Vue 不管理它 -->
    <input placeholder="备注" />
    <!-- ② 有本地 state 的子组件 -->
    <TodoItem :todo="item" />
    <!-- ③ checkbox 的 checked 状态 -->
    <input type="checkbox" />
  </div>
</template>

<!-- ✅ 最优：后端返回的稳定唯一 id -->
<li v-for="item in list" :key="item.id">...</li>

<!-- ✅ 无 id 时：用业务上唯一的字段组合 -->
<li v-for="item in list" :key="`${item.type}_${item.code}`">...</li>

<!-- ✅ 数据本身真的没有唯一标识：在数据进入响应式状态的那一刻生成并固化 -->
<script setup>
const list = ref([]);
async function load() {
  const raw = await fetchList();
  // 在这里生成一次，之后这个 _uid 就跟着数据项走，不会变
  list.value = raw.map((it) => ({ ...it, _uid: crypto.randomUUID() }));
}
</script>

<!-- ❌ 绝对不要：每次渲染都生成新 key，导致整个列表每次都销毁重建 -->
<li v-for="item in list" :key="Math.random()">...</li>

<!-- ⚠️ 仅在同时满足这四点时，index 才是安全的：
     ① 列表静态不增删  ② 永不排序/过滤  ③ 项内无任何本地状态  ④ 无过渡动画 -->
<li v-for="(tab, index) in STATIC_TABS" :key="index">{{ tab }}</li>

import { reactive, ref, toRefs, toRef, shallowRef, triggerRef } from 'vue';

// ---------- ① 解构 reactive 对象 ----------
const state = reactive({ count: 0, name: 'vue' });
let { count } = state;
count++;                       // ❌ count 只是一个普通数字副本，改它跟 state 没关系
// ✅ 方案 A：toRefs 把每个属性转成 ref，保持连接
const { count: countRef } = toRefs(state);
countRef.value++;              // ✅ 等价于 state.count++
// ✅ 方案 B：单个属性用 toRef
const nameRef = toRef(state, 'name');
// ✅ 方案 C：干脆用 ref，心智更统一
const count2 = ref(0);

// ---------- ② 整体替换 reactive 对象 ----------
let list = reactive([]);
async function load() {
  const data = await fetchList();
  list = reactive(data);       // ❌ 只是让局部变量 list 指向了一个新代理，
                               //    模板里绑定的还是旧的那个代理对象
}
// ✅ 方案 A：改用 ref，整体替换天然支持
const list2 = ref([]);
list2.value = await fetchList();
// ✅ 方案 B：保持引用不变，原地修改
list.length = 0;
list.push(...(await fetchList()));
// ✅ 方案 C：对象用 Object.assign
const form = reactive({ a: 1, b: 2 });
Object.assign(form, { a: 10, b: 20 });

// ---------- ③ 把 ref 的值传出去 ----------
const size = ref(10);
function useSize(s) { /* s 是一个普通数字，改它无效 */ }
useSize(size.value);           // ❌ 丢失响应性
useSize(size);                 // ✅ 传 ref 本身

// ---------- ④ shallowRef / shallowReactive 的深层修改 ----------
const big = shallowRef({ list: [1, 2, 3] });
big.value.list.push(4);        // ❌ 不触发（只有 .value 整体替换才触发）
triggerRef(big);               // ✅ 手动触发
big.value = { ...big.value, list: [...big.value.list, 4] }; // ✅ 或整体替换

// ---------- ⑤ markRaw / Object.freeze ----------
import { markRaw } from 'vue';
const chart = markRaw(new ECharts(dom)); // 永远不会被代理（这是有意为之，避免性能灾难）
const frozen = reactive(Object.freeze({ a: 1 })); // set 会静默失败（严格模式下报错）

// Vue2
this.obj.newKey = 1;              // ❌ 不触发
this.$set(this.obj, 'newKey', 1); // ✅
this.obj = { ...this.obj, newKey: 1 }; // ✅ 整体替换也可以

this.arr[0] = 'x';                // ❌ 不触发
this.arr.length = 0;              // ❌ 不触发
this.$set(this.arr, 0, 'x');      // ✅
this.arr.splice(0, 1, 'x');       // ✅

delete this.obj.key;              // ❌ 不触发
this.$delete(this.obj, 'key');    // ✅

<script setup>
import { ref, reactive, watchEffect } from 'vue';
const show = ref(false);
const state = reactive({ a: 1, b: 2 });

// ❌ 异步回调中的读取不会被收集：effect 执行完 activeEffect 就被清空了
watchEffect(() => {
  setTimeout(() => {
    console.log(state.a); // 这次读取时 activeEffect 是 null，收集不到
  }, 0);
});

// ✅ 在同步阶段读取
watchEffect(() => {
  const a = state.a;      // 同步读取 → 被收集
  setTimeout(() => console.log(a), 0);
});

// ❌ 条件分支导致的"依赖缺失"：show 为 false 时，渲染函数根本没读 state.b，
//    所以 state.b 变化时不触发重渲染。这通常不是 bug（因为没显示），
//    但如果你依赖"b 变化 → 触发某个副作用"，就会失效
</script>

<template>
  <div v-if="show">{{ state.b }}</div>
</template>

// watch 的 getter 写法坑
const obj = reactive({ nested: { count: 0 } });

watch(obj.nested, (v) => {});        // ⚠️ 传的是响应式对象 → 隐式 deep，能触发但拿不到 oldValue
watch(() => obj.nested, (v) => {});  // ❌ getter 返回的引用没变 → 不触发
watch(() => obj.nested.count, (v) => {}); // ✅ 精确追踪某个属性
watch(() => obj.nested, (v) => {}, { deep: true }); // ✅ 深度监听

<script setup>
import { ref, nextTick, watch, onMounted } from 'vue';
const count = ref(0);
const el = ref(null);

async function update() {
  count.value = 1;
  console.log(el.value.textContent);  // ❌ 输出 '0'：DOM 还没更新
  await nextTick();
  console.log(el.value.textContent);  // ✅ 输出 '1'
}

// watch 的 flush 时机
watch(count, () => {
  console.log('pre  :', el.value.textContent); // 默认 flush:'pre'，组件更新前 → 旧 DOM
});
watch(count, () => {
  console.log('post :', el.value.textContent); // flush:'post'，组件更新后 → 新 DOM
}, { flush: 'post' });
watch(count, () => {
  console.log('sync :', el.value.textContent); // flush:'sync'，同步触发，慎用（高频改动会卡）
}, { flush: 'sync' });
</script>

<template><div ref="el">{{ count }}</div></template>

// runtime-core/src/scheduler.ts（简化）
const queue = [];
let isFlushPending = false;
const resolvedPromise = Promise.resolve();

export function queueJob(job) {
  // 去重：同一个组件的渲染 job 在一个 tick 内只入队一次
  if (!queue.includes(job, isFlushing ? flushIndex + 1 : flushIndex)) {
    queue.push(job);
    queueFlush();
  }
}
function queueFlush() {
  if (isFlushPending) return;
  isFlushPending = true;
  resolvedPromise.then(flushJobs); // 微任务，本轮宏任务结束后立即执行
}
function flushJobs() {
  // 按 job.id（组件 uid）升序：保证父组件先于子组件更新
  queue.sort((a, b) => a.id - b.id);
  // ... 依次执行
}

// 路由 /user/1 → /user/2，组件是同一个，Vue 会复用实例：
// onMounted 不会重跑，setup 不会重跑，写在 onMounted 里的数据请求不会发起
// ✅ 方案 A：watch 路由参数
watch(() => route.params.id, fetchUser, { immediate: true });
// ✅ 方案 B：强制重建
// <router-view :key="$route.fullPath" />

<!-- v-if / v-else 切换同类型元素时，Vue 会复用 DOM -->
<input v-if="isEmail" placeholder="邮箱" />
<input v-else placeholder="用户名" />
<!-- ⚠️ 切换时用户已输入的内容不会清空（DOM 被复用了），只有 placeholder 变了 -->
<!-- ✅ 加不同的 key 强制重建 -->
<input v-if="isEmail" key="email" placeholder="邮箱" />
<input v-else key="username" placeholder="用户名" />

<keep-alive>
  <component :is="current" />
</keep-alive>
<!-- 组件被缓存，切回来时 onMounted 不重跑，只触发 onActivated -->
<!-- 依赖 onMounted 做数据刷新的逻辑会失效；组件内的滚动位置、表单填写会保留 -->
<!-- ✅ 需要每次激活都刷新的逻辑放 onActivated；需要清理的放 onDeactivated -->

// ECharts / 地图 / sortablejs / 富文本编辑器 直接改了 Vue 管理的 DOM
// 下次 patch 时 Vue 按照自己的 vnode 树去更新，会覆盖或错乱第三方库的改动
// ✅ 用 v-once / v-html 隔离，或者给第三方库一个 Vue 完全不管的容器节点
// ✅ 库实例本身一定要 markRaw / shallowRef，否则被深度代理会导致性能崩溃甚至死循环
const chart = shallowRef(null);
onMounted(() => { chart.value = markRaw(echarts.init(el.value)); });

// 服务端渲染出的 HTML 与客户端首次渲染的结果不一致时，
// Vue3 会在 dev 报 "Hydration node mismatch"，prod 则可能静默地把服务端 HTML 丢弃重新渲染，
// 表现为闪烁、事件绑定丢失、状态被重置
// 常见原因：new Date()、Math.random()、访问 window/localStorage、
//          依赖用户 UA 的条件渲染、时区差异
// ✅ 用 <ClientOnly> 包裹，或把不确定的内容放到 onMounted 之后再渲染

// defineAsyncComponent 加载的组件在解析完成前是占位的，
// 父组件 onMounted 里通过 ref 拿子组件实例会拿到 null

<!-- v-model 与 :value 同时写，后者会被 v-model 覆盖，表现为"绑定不生效" -->
<input v-model="a" :value="b" />
<!-- style/class 的对象绑定与静态属性会合并，但同名 CSS 属性的覆盖顺序容易反直觉 -->

// ❌ computed 依赖了 Date.now() 这种非响应式的值 → 缓存住之后永远不更新
const label = computed(() => `${state.name} @ ${Date.now()}`);
// ❌ computed 里改了别的响应式数据 → 可能触发无限更新循环

① 数据层：console.log / Vue Devtools 看数据本身有没有变
   没变 → 是业务逻辑或响应性丢失（第一类）
   变了 → 往下走
② 触发层：给该属性加一个 watch 或 watchEffect，看有没有被触发
   没触发 → 依赖没收集到（第二类），或响应性丢失
   触发了 → 往下走
③ 渲染层：用 Vue Devtools 的 "Highlight updates" / onRenderTriggered 看组件有没有重渲染
   没重渲染 → 渲染函数里没有真正读这个属性
   重渲染了但 DOM 不对 → 往下走
④ DOM 层：检查 key、组件复用、keep-alive、第三方库、v-html
   → 大概率是第四类
⑤ 时机层：把读 DOM 的代码放进 nextTick 或 flush:'post' 再试

// ============ Vuex 4 ============
// store/modules/user.js
export default {
  namespaced: true,
  state: () => ({ info: null, loading: false }),
  getters: {
    // 参数签名固定为 (state, getters, rootState, rootGetters)，类型推导困难
    displayName: (state) => state.info?.nickname || state.info?.name || '游客',
  },
  mutations: {
    // mutation 必须同步，且只能通过字符串 commit
    SET_INFO(state, info) { state.info = info; },
    SET_LOADING(state, v) { state.loading = v; },
  },
  actions: {
    async fetchUser({ commit, rootGetters }, id) {
      commit('SET_LOADING', true);       // 字符串，拼错了运行时才报错
      try {
        const info = await api.getUser(id);
        commit('SET_INFO', info);
      } finally {
        commit('SET_LOADING', false);
      }
    },
  },
};

// 组件中使用
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const name = computed(() => store.getters['user/displayName']); // 长字符串路径，无类型
store.dispatch('user/fetchUser', 1);                            // 无参数类型检查

// ============ Pinia（setup 写法，推荐） ============
// stores/user.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import { useAppStore } from './app'; // store 之间直接 import，无需 rootState

export const useUserStore = defineStore('user', () => {
  // ---- state：就是 ref ----
  const info = ref<UserInfo | null>(null);
  const loading = ref(false);

  // ---- getters：就是 computed ----
  const displayName = computed(() => info.value?.nickname || info.value?.name || '游客');
  const isVip = computed(() => (info.value?.level ?? 0) >= 3);

  // ---- actions：就是普通函数，同步异步随意 ----
  async function fetchUser(id: number) {
    loading.value = true;
    try {
      info.value = await api.getUser(id);
      // 跨 store 调用：直接用，像调普通函数
      useAppStore().setTitle(info.value.name);
    } finally {
      loading.value = false;
    }
  }

  function logout() {
    info.value = null;
  }

  // 想暴露什么就 return 什么，没 return 的就是私有的（这一点 Vuex 做不到）
  return { info, loading, displayName, isVip, fetchUser, logout };
});

// 组件中使用
import { storeToRefs } from 'pinia';
const userStore = useUserStore();
// ⚠️ 直接解构会丢失响应性（store 本质是 reactive 对象），必须用 storeToRefs
const { info, displayName, loading } = storeToRefs(userStore);
// action 是函数，可以直接解构（函数不需要响应性）
const { fetchUser, logout } = userStore;

fetchUser(1); // ✅ 完整类型提示：参数是 number，返回 Promise<void>

const store = useUserStore();

// ---- ① 直接改 state（Vuex 必须走 mutation） ----
store.info = { name: 'a' };

// ---- ② $patch 批量修改：多次修改只触发一次 devtools 记录和一次渲染 ----
store.$patch({ loading: false, count: store.count + 1 });
// 函数式 $patch：适合数组等复杂修改
store.$patch((state) => {
  state.list.push(newItem);
  state.hasChanged = true;
});

// ---- ③ $reset：重置到初始状态（仅 option 写法开箱可用，setup 写法需自己实现） ----
store.$reset();

// ---- ④ $subscribe：订阅 state 变化，常用于持久化 ----
store.$subscribe((mutation, state) => {
  localStorage.setItem('user', JSON.stringify(state));
}, { detached: true }); // detached: 组件卸载后订阅依然有效

// ---- ⑤ $onAction：订阅 action 调用，常用于埋点、错误上报 ----
store.$onAction(({ name, args, after, onError }) => {
  const start = Date.now();
  after((result) => report('action_success', { name, cost: Date.now() - start }));
  onError((err) => report('action_error', { name, err }));
});

// ---- ⑥ 插件机制：几行代码实现全局持久化 ----
pinia.use(({ store }) => {
  const saved = localStorage.getItem(store.$id);
  if (saved) store.$patch(JSON.parse(saved));
  store.$subscribe((_, state) => {
    localStorage.setItem(store.$id, JSON.stringify(state));
  });
});

这个状态需要被多个组件共享吗？
├─ 否 → 留在组件内（ref / reactive）
└─ 是 → 是父子/祖孙关系，且层级 ≤ 2 吗？
        ├─ 是 → props + emit
        └─ 否 → 是"跨整个应用的配置类数据"吗（主题、语言、权限）？
                ├─ 是 → provide/inject 或 Pinia 都可以，Pinia 更易调试
                └─ 否 → 是"服务端数据的缓存"吗？
                        ├─ 是 → 优先 TanStack Query / useAsyncState
                        │       （它们自带缓存失效、重试、去重、乐观更新）
                        └─ 否 → Pinia

// runtime-core/src/renderer.ts —— patchKeyedChildren 第 5 步（简化并加注释）
const patchKeyedChildren = (c1, c2, container, parentAnchor) => {
  let i = 0;
  let e1 = c1.length - 1; // 旧列表尾指针
  let e2 = c2.length - 1; // 新列表尾指针

  // ① 前序同步：sync from start
  while (i <= e1 && i <= e2) {
    if (isSameVNodeType(c1[i], c2[i])) patch(c1[i], c2[i], container);
    else break;
    i++;
  }
  // ② 后序同步：sync from end
  while (i <= e1 && i <= e2) {
    if (isSameVNodeType(c1[e1], c2[e2])) patch(c1[e1], c2[e2], container);
    else break;
    e1--; e2--;
  }
  // ③ 旧的走完，新的有剩 → 全部挂载
  if (i > e1) {
    if (i <= e2) {
      const anchor = e2 + 1 < c2.length ? c2[e2 + 1].el : parentAnchor;
      while (i <= e2) patch(null, c2[i++], container, anchor);
    }
  }
  // ④ 新的走完，旧的有剩 → 全部卸载
  else if (i > e2) {
    while (i <= e1) unmount(c1[i++]);
  }
  // ⑤ 中间乱序序列 ★ LIS 登场 ★
  else {
    const s1 = i, s2 = i;

    // 5.1 为新列表的乱序段建立 key → newIndex 的映射
    const keyToNewIndexMap = new Map();
    for (i = s2; i <= e2; i++) {
      keyToNewIndexMap.set(c2[i].key, i);
    }

    // 5.2 遍历旧列表的乱序段，找到能复用的节点并 patch，找不到的卸载
    let patched = 0;
    const toBePatched = e2 - s2 + 1;                 // 新列表乱序段的长度
    let moved = false;
    let maxNewIndexSoFar = 0;
    // 核心数据结构：下标 = 新列表中的相对位置，值 = 旧列表中的下标 + 1
    // 之所以 +1，是为了让 0 有独立含义："这是一个全新节点，没有对应的旧节点"
    const newIndexToOldIndexMap = new Array(toBePatched).fill(0);

    for (i = s1; i <= e1; i++) {
      const prevChild = c1[i];
      if (patched >= toBePatched) { unmount(prevChild); continue; }
      const newIndex = keyToNewIndexMap.get(prevChild.key);
      if (newIndex === undefined) {
        unmount(prevChild);                          // 新列表里没有这个 key → 删除
      } else {
        newIndexToOldIndexMap[newIndex - s2] = i + 1;
        // 只要出现一次"新位置不是递增的"，就说明发生了乱序，需要移动
        if (newIndex >= maxNewIndexSoFar) maxNewIndexSoFar = newIndex;
        else moved = true;
        patch(prevChild, c2[newIndex], container);   // 复用并更新
        patched++;
      }
    }

    // 5.3 求最长递增子序列（只在确实发生了移动时才求，省掉一次 O(n log n)）
    const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : [];
    let j = increasingNewIndexSequence.length - 1;

    // 5.4 从后往前遍历新列表的乱序段
    //     倒序的原因：insertBefore 需要一个"已经就位的后继节点"作为锚点，
    //     从后往前能保证当前节点的后一个节点必定已经处理完毕
    for (i = toBePatched - 1; i >= 0; i--) {
      const nextIndex = s2 + i;
      const nextChild = c2[nextIndex];
      const anchor = nextIndex + 1 < c2.length ? c2[nextIndex + 1].el : parentAnchor;

      if (newIndexToOldIndexMap[i] === 0) {
        patch(null, nextChild, container, anchor);   // 全新节点 → 挂载
      } else if (moved) {
        if (j < 0 || i !== increasingNewIndexSequence[j]) {
          move(nextChild, container, anchor);        // 不在 LIS 中 → 必须移动
        } else {
          j--;                                        // 在 LIS 中 → 保持不动
        }
      }
    }
  }
};

旧: [A, B, C, D, E, F, G]
新: [A, B, E, C, D, H, F, G]

① 前序同步：A、B 相同 → i = 2
② 后序同步：G、G 相同；F、F 相同 → e1 = 4, e2 = 5
   此时旧的乱序段 = [C, D, E]（下标 2..4）
       新的乱序段 = [E, C, D, H]（下标 2..5）

③ keyToNewIndexMap = { E:2, C:3, D:4, H:5 }
④ toBePatched = 4，newIndexToOldIndexMap 初始 = [0, 0, 0, 0]
   遍历旧乱序段：
     C（旧下标2）→ 新下标3 → map[3-2=1] = 2+1 = 3；maxNewIndexSoFar = 3
     D（旧下标3）→ 新下标4 → map[4-2=2] = 3+1 = 4；maxNewIndexSoFar = 4
     E（旧下标4）→ 新下标2 → map[2-2=0] = 4+1 = 5；2 < 4 → moved = true
   最终 newIndexToOldIndexMap = [5, 3, 4, 0]
                                 ↑E ↑C ↑D ↑H(全新)

⑤ getSequence([5,3,4,0]) → 忽略 0，最长递增子序列是 [3,4]，对应下标 [1, 2]
   含义：新乱序段中下标 1(C) 和 2(D) 的相对顺序与旧列表一致 → 不用动

⑥ 从后往前遍历 i = 3,2,1,0：
   i=3 (H)：map[3]===0 → 挂载新节点 H，锚点是 F
   i=2 (D)：在 LIS 中 → 不动，j--
   i=1 (C)：在 LIS 中 → 不动，j--
   i=0 (E)：不在 LIS 中 → 移动 E 到 C 前面

结论：只做了 1 次挂载 + 1 次移动。
如果不用 LIS，朴素做法要移动 E、C、D 三个节点。

/**
 * 求最长递增子序列，返回的是「下标数组」而不是值数组
 * 时间复杂度 O(n log n)，空间 O(n)
 * @param {number[]} arr 即 newIndexToOldIndexMap，0 表示新增节点，需跳过
 * @returns {number[]} 组成最长递增子序列的元素在 arr 中的下标（升序）
 */
function getSequence(arr) {
  // p[i] 记录：当 arr[i] 被放入 result 时，它在 result 中的前一个元素的「下标」
  // 用它做最后的回溯，解决"贪心过程中 result 内容可能被替换、不再是真实子序列"的问题
  const p = arr.slice();
  // result 存放的是「下标」，且满足：arr[result[0]] < arr[result[1]] < ...
  // 贪心不变式：长度为 k+1 的所有递增子序列中，result[k] 对应的结尾值是最小的
  const result = [0];
  let i, j, u, v, c;
  const len = arr.length;

  for (i = 0; i < len; i++) {
    const arrI = arr[i];
    // 0 表示"这是一个全新节点，在旧列表中没有对应"，不参与 LIS 计算
    if (arrI !== 0) {
      j = result[result.length - 1]; // 当前最长子序列的结尾元素的下标
      if (arr[j] < arrI) {
        // 情况一：比当前结尾还大 → 直接接到末尾，子序列长度 +1
        p[i] = j;                    // 记录前驱
        result.push(i);
        continue;
      }
      // 情况二：不比结尾大 → 二分查找 result 中第一个 >= arrI 的位置，替换掉它
      //   替换的意义：让长度为 u+1 的子序列有一个更小的结尾，
      //   为后续元素留出更多"接上去"的空间。这不改变当前长度，但让未来更可能变长。
      u = 0;
      v = result.length - 1;
      while (u < v) {
        c = (u + v) >> 1;            // 无符号右移 1 位 = 除以 2 取整，比 Math.floor 快
        if (arr[result[c]] < arrI) u = c + 1;
        else v = c;
      }
      // 循环结束时 u === v，指向第一个 arr[result[u]] >= arrI 的位置
      if (arrI < arr[result[u]]) {
        if (u > 0) p[i] = result[u - 1]; // 记录前驱：它前面那个位置对应的下标
        result[u] = i;                   // 替换
      }
    }
  }

  // ★ 回溯：此时 result 的「长度」一定正确，但「内容」可能因为替换而不是一个真实的子序列。
  //   例如 arr = [3,1,2]：遍历后 result = [1,2]（值 1,2），恰好正确；
  //   但 arr = [1,4,2,5,3] 这类情况，末尾之前的元素可能被更小的值覆盖过。
  //   所以从最后一个元素开始，沿着 p 数组一路往前串，才能得到真正的 LIS。
  u = result.length;
  v = result[u - 1];      // 最后一个元素的下标一定是正确的
  while (u-- > 0) {
    result[u] = v;
    v = p[v];             // 跳到前驱
  }
  return result;
}

// ---------- 验证 ----------
console.log(getSequence([5, 3, 4, 0]));       // [1, 2]  → 对应值 3, 4
console.log(getSequence([2, 1, 5, 3, 6, 4, 8, 9, 7]));
// [1, 3, 5, 6, 7] → 对应值 1, 3, 4, 8, 9，长度 5
console.log(getSequence([1, 2, 3, 4]));       // [0, 1, 2, 3] 全部递增
console.log(getSequence([4, 3, 2, 1]));       // [3] 长度为 1

arr = [2, 3, 1, 5]（已在 Node 中实测）

不带回溯的贪心过程（result 存下标，括号里是对应的值）：
  i=0, 值2：result = [0]                        → 值序列 [2]
  i=1, 值3：3 > 2，push                         → result = [0,1]，值 [2,3]，p[1]=0
  i=2, 值1：1 < 3，二分找到位置0，替换           → result = [2,1]，值 [1,3]
  i=3, 值5：5 > 3，push                         → result = [2,1,3]，值 [1,3,5]，p[3]=1

此时 result = [2,1,3]：值序列 [1,3,5] 看着递增，但下标序列是 2 → 1 → 3——
下标 2 排在下标 1 前面，意味着"arr[2] 在 arr[1] 之前"，这在原数组里根本不成立。
result 已经不是一个合法的子序列了（diff 里直接拿它当"不动集合"会移错节点）。

回溯修复：从末尾（一定正确）出发沿 p 还原：
  v = result[2] = 3 → result[2] = 3
  v = p[3] = 1     → result[1] = 1
  v = p[1] = 0     → result[0] = 0
最终 result = [0,1,3]，值 [2,3,5] ✅ 下标、值都递增，才是真正的 LIS。

出错的机理：值 1（下标 2）把 result 的位置 0 替换掉了——它属于"另一条潜在子序列"
（以 1 开头的那条），但 result 后面的元素（下标 1 的值 3）是接在旧的 2 后面的。
一旦发生这种"跨链替换"，result 前面的元素就不再是末尾元素的合法前驱。
回溯靠的是 p 数组：每个元素入场时记下"我当时真正接在谁后面"，所以能还原出真实链条。

用户在 A 中改动筛选项
 → ① 修改响应式数据（filter）
 → ② trigger：找到所有依赖 filter 的 effect（B、C 的渲染 effect、相关 computed、watch）
 → ③ 调度：queueJob 推入微任务队列，按组件 uid 排序去重
 → ④ 微任务 flush：执行 B、C 的渲染 effect
      → 重新执行 render 函数（含 computed 重算、模板中的方法调用、数据格式化）
      → 生成新的 vnode 树
 → ⑤ patch：新旧 vnode diff（大列表走 patchKeyedChildren，可能触发 LIS）
 → ⑥ DOM 操作：创建/更新/移动真实节点
 → ⑦ 浏览器：样式计算 → 布局 → 绘制 → 合成

录制 → 改一次筛选项 → 停止
看火焰图的时间分布：
  ├─ 大块的黄色（Scripting）→ JS 计算或 Vue 渲染逻辑慢 → 走第二步
  ├─ 大块的紫色（Rendering / Layout）→ DOM 节点太多或布局抖动 → 走第四步
  └─ 大块的绿色（Painting）→ 复杂样式/大量图片/滤镜 → 检查 CSS
展开 Scripting 的调用栈，通常会看到：
  componentUpdateFn → renderComponentRoot → patch → patchKeyedChildren
  哪一层耗时最长，问题就在哪一层

<script setup>
import { onRenderTracked, onRenderTriggered } from 'vue';

// 开发环境专用：告诉你这次渲染是被「哪个对象的哪个属性的哪种操作」触发的
onRenderTriggered((e) => {
  console.log('触发重渲染:', {
    type: e.type,      // 'set' | 'add' | 'delete' | 'clear'
    key: e.key,        // 哪个属性
    target: e.target,  // 哪个对象
    oldValue: e.oldValue,
    newValue: e.newValue,
  });
});

// 告诉你这个组件收集了哪些依赖（用来发现"收集了不该收集的东西"）
onRenderTracked((e) => console.log('收集依赖:', e.key));
</script>

// 在控制台直接数
document.querySelectorAll('*').length;
// 超过 3000~5000 个节点，单次全量 diff 就会明显卡；超过 10000 基本必卡

<script setup>
import { ref, watch } from 'vue';
import { useDebounceFn, refDebounced } from '@vueuse/core';

const keyword = ref('');           // 输入框绑定这个，保证输入流畅
const filter = ref({ keyword: '', category: '' });

// 方案 A：防抖函数
const applyFilter = useDebounceFn((kw) => {
  filter.value = { ...filter.value, keyword: kw };
}, 300);
watch(keyword, applyFilter);

// 方案 B：VueUse 的 refDebounced，把"输入值"和"生效值"分离
const debouncedKeyword = refDebounced(keyword, 300);
// B、C 组件依赖 debouncedKeyword 而不是 keyword
</script>

<template>
  <!-- 输入框绑定 keyword：输入永远流畅，不受下游渲染影响 -->
  <input v-model="keyword" />
  <ListB :keyword="debouncedKeyword" />
  <ChartC :keyword="debouncedKeyword" />
</template>

<script setup>
import { ref, computed } from 'vue';
const rawList = ref([]);      // 10000 条
const filter = ref({ keyword: '', status: 'all', sortBy: 'time' });

// ❌ 模板里写 {{ getFiltered() }}：每次组件重渲染都重新执行一遍 filter+sort，无缓存
function getFiltered() {
  return rawList.value.filter(/*...*/).sort(/*...*/);
}

// ✅ computed 有缓存：只有 rawList 或 filter 变化时才重算
//    并且分层拆分，让不同粒度的变化只触发必要的那一层重算
const filtered = computed(() =>
  rawList.value.filter((it) => it.name.includes(filter.value.keyword))
);
const sorted = computed(() =>
  // 注意：sort 会原地修改数组，必须先浅拷贝，否则会修改上游 computed 的结果
  [...filtered.value].sort((a, b) => a[filter.value.sortBy] - b[filter.value.sortBy])
);
// 这样改 sortBy 时，filtered 不会重算（它不依赖 sortBy），只有 sorted 重算
</script>

import { shallowRef, markRaw, triggerRef } from 'vue';

// ❌ 10000 条数据、每条 20 个字段的数组用 reactive
//    → 初始化时惰性代理还好，但一旦渲染时全部访问过，就建立了 200000 个依赖
//    → 任何一次 trigger 都要遍历庞大的 dep 集合
const list = ref(bigArray);

// ✅ 列表数据通常是"整体替换"的（重新请求后全量覆盖），不需要深层响应式
const list = shallowRef(bigArray);
list.value = newBigArray;         // 触发更新
// 如果确实需要原地改某一项后触发：
list.value[0].name = 'x';
triggerRef(list);                 // 手动触发

// ✅ 第三方实例（图表、地图、编辑器）一定要 markRaw
const chartInstance = markRaw(echarts.init(el));
// 不 markRaw 的后果：ECharts 实例内部有大量循环引用和上万个属性，
// 被深度代理后每次访问都走 Proxy，性能可能下降一个数量级，甚至栈溢出

<template>
  <div v-for="item in list" :key="item.id" v-memo="[item.id, item.selected]">
    <!-- 只有 item.id 或 item.selected 变化时，这棵子树才重新 patch -->
    <!-- 其他任何变化（包括父组件重渲染）都直接复用上次的 vnode，完全跳过 diff -->
    <ExpensiveRow :data="item" />
  </div>
</template>

<script setup>
// 生产环境直接用成熟方案：vue-virtual-scroller / @tanstack/vue-virtual / VueUse 的 useVirtualList
import { useVirtualList } from '@vueuse/core';
import { computed } from 'vue';

const props = defineProps(['list']);
const { list: visibleList, containerProps, wrapperProps } = useVirtualList(
  computed(() => props.list),
  { itemHeight: 48, overscan: 10 }
);
</script>

<template>
  <div v-bind="containerProps" style="height: 600px">
    <div v-bind="wrapperProps">
      <!-- 无论总数据是 1 万还是 100 万，这里始终只渲染约 20 个节点 -->
      <div v-for="{ data, index } in visibleList" :key="data.id" style="height:48px">
        {{ data.name }}
      </div>
    </div>
  </div>
</template>

<!-- ❌ 筛选状态放在父组件，父组件重渲染带着 B、C 一起走 patch -->
<script setup>
const filter = ref({});
</script>
<template>
  <FilterA v-model="filter" />
  <ListB :filter="filter" />
  <ChartC :filter="filter" />
</template>

<!-- ✅ 改进一：状态放 Pinia / provide，A 改动不引起父组件重渲染 -->
<!-- ✅ 改进二：B 和 C 分别只订阅自己需要的字段 -->
<script setup>
// B 只关心 keyword，不关心 sortBy
const keyword = computed(() => filterStore.keyword);
// C 只关心 dateRange
const dateRange = computed(() => filterStore.dateRange);
// 这样改 sortBy 时，B 完全不会被触发
</script>

// 如果筛选/聚合本身要几百毫秒（比如前端做 10 万条数据的多维聚合）
// 那么无论怎么优化 Vue，主线程都会被阻塞 → 唯一出路是移出主线程
import { useWebWorkerFn } from '@vueuse/core';

const { workerFn, workerStatus } = useWebWorkerFn((list, filter) => {
  // 这段代码在 Worker 线程执行，不阻塞主线程
  return list.filter(/* 复杂逻辑 */).reduce(/* 聚合 */);
});

watch(filter, async () => {
  loading.value = true;
  result.value = await workerFn(rawList.value, filter.value);
  loading.value = false;
});

// 必须一次性渲染大量节点、又不能用虚拟列表时（比如要支持 Ctrl+F 全文搜索）
const renderedCount = ref(0);
function renderInChunks(total, chunk = 50) {
  function step() {
    renderedCount.value = Math.min(renderedCount.value + chunk, total);
    if (renderedCount.value < total) requestAnimationFrame(step);
  }
  step();
}
// 模板中 v-for="item in list.slice(0, renderedCount)"

① 先问产品：这个列表必须一次展示全部吗？→ 能分页就分页（成本最低，效果最好）
② 减少触发：防抖/节流，把输入值与生效值分离
③ 减少计算：模板方法 → computed；computed 分层拆分
④ 减少响应式开销：大数组 shallowRef，第三方实例 markRaw
⑤ 减少渲染节点：虚拟列表（数量级改善）
⑥ 减少更新范围：拆组件、精确订阅、稳定 key、v-memo
⑦ 移出主线程：Web Worker
⑧ 兜底：分批渲染 + loading 骨架，至少让用户感知不到"卡死"

┌──────────── Webpack Dev ────────────┐
  entry (main.js)
    → 递归解析所有 import，构建完整依赖图
    → 每个模块跑 loader 链（babel-loader / vue-loader / css-loader...）
    → 打包成一个（或几个）bundle
    → dev server 提供 bundle
  ⏱ 项目有 1000 个模块 → 启动前要处理完 1000 个模块
  ⏱ 改 1 个文件 → 重新编译该模块 + 更新依赖它的 chunk

┌──────────── Vite Dev ────────────┐
  启动 dev server（毫秒级，几乎不做事）
    → 只做一件事：esbuild 预构建 node_modules 依赖（首次约几百毫秒，之后走缓存）
  浏览器请求 index.html
    → 遇到 <script type="module" src="/src/main.js">
    → 请求 /src/main.js
    → Vite 拦截请求，用 esbuild 编译这一个文件（去 TS 类型、转 JSX），返回
    → 浏览器解析返回内容里的 import，继续请求下一个文件……
  ⏱ 项目有 1000 个模块 → 只编译当前页面实际用到的那几十个
  ⏱ 改 1 个文件 → 只重新编译这 1 个文件，通过 WebSocket 通知浏览器重新 import 它

// 你写的
import { createApp } from 'vue';
import _ from 'lodash-es';

// Vite 返回给浏览器的
import { createApp } from '/node_modules/.vite/deps/vue.js?v=8f3a2b1c';
import _ from '/node_modules/.vite/deps/lodash-es.js?v=8f3a2b1c';
//                                                  ↑ 版本 hash，用于强缓存失效

// vite.config.js
export default {
  optimizeDeps: {
    // 强制预构建某些依赖（比如动态 import 的、Vite 扫不到的）
    include: ['some-cjs-package'],
    // 排除某些依赖（比如本地 link 的、需要热更新的包）
    exclude: ['@my-org/local-lib'],
  },
};

Vite HMR:
  文件变更 → Vite 让该模块的缓存失效 →
  沿 importers 链向上找到最近的「HMR 边界」（比如一个 .vue 组件） →
  通过 WebSocket 发送 { type: 'update', path: '/src/Foo.vue' } →
  浏览器重新 import 这一个模块（带新的 timestamp query 绕过缓存）→ 局部替换
  ⏱ 与项目规模完全无关

Webpack HMR:
  文件变更 → 重新编译该模块 → 重新生成受影响的 chunk →
  生成 hot-update.json + hot-update.js → 浏览器拉取并应用
  ⏱ 受 chunk 大小和依赖图复杂度影响

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    target: 'es2015',
    rollupOptions: {
      output: {
        // 手动分包：把变动少的第三方库单独打包，利用浏览器长期缓存
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          echarts: ['echarts'],
        },
      },
    },
    // 大于 4KB 的资源不内联为 base64
    assetsInlineLimit: 4096,
    // 生产默认用 esbuild 压缩（比 terser 快 20~40 倍，压缩率略低 1~2%）
    minify: 'esbuild',
  },
  server: {
    proxy: {
      '/api': { target: 'http://localhost:3000', changeOrigin: true },
    },
  },
});