Vue 专题

// Vue 2 响应式核心（简化）
function defineReactive(obj, key, val) {
  const dep = new Dep() // 每个属性一个依赖收集器
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) dep.depend() // 依赖收集
      return val
    },
    set(newVal) {
      val = newVal
      dep.notify() // 派发更新
    }
  })
}

// Vue 3 reactive 核心（简化）
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver)
      track(target, key) // 依赖收集
      // 惰性深层代理：访问时才代理
      return isObject(res) ? reactive(res) : res
    },
    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) // delete 也能触发
    }
  })
}

┌─────────────────────────────────────────────┐
│           effectStack (全局)                 │
│  当前正在执行的副作用函数 (activeEffect)     │
└──────────────────┬──────────────────────────┘
                   │
  响应式数据被读取 (get)
                   │
┌──────────────────▼──────────────────────────┐
│  track(target, key)                          │
│  将 activeEffect 存入 targetMap              │
│    targetMap: WeakMap<target, Map<key, Set>> │
│    结构: target → key → [effect1, effect2]  │
└──────────────────────────────────────────────┘

  响应式数据被修改 (set)
                   │
┌──────────────────▼──────────────────────────┐
│  trigger(target, key)                        │
│  从 targetMap 取出所有依赖的 effect          │
│  依次执行 effect()                           │
└──────────────────────────────────────────────┘

// computed 本质：惰性求值的 effect + dirty 缓存标记
function computed(getter) {
  let value, dirty = true

  const effect = new ReactiveEffect(getter, () => {
    if (!dirty) {
      dirty = true // 依赖变化时标记脏
      triggerRefValue(computedRef) // 通知依赖 computed 的 effect
    }
  })

  const computedRef = {
    get value() {
      if (dirty) {
        value = effect.run() // 重新执行 getter
        dirty = false // 标记干净
      }
      trackRefValue(computedRef) // 收集依赖
      return value
    }
  }
  return computedRef
}

// watchEffect with cleanup (Vue 3.5+)
watchEffect(async () => {
  const controller = new AbortController()
  onWatcherCleanup(() => controller.abort())

  const res = await fetch(`/api/${id.value}`, { signal: controller.signal })
  data.value = await res.json()
})

// 'pre'（默认）— 组件更新前
// 'post' — 组件更新后（可访问更新后的 DOM）
// 'sync' — 立即同步执行，慎用

watch(source, callback, { flush: 'post' })
watchPostEffect(() => {})  // flush: 'post' 的简写

const state = reactive({ name: 'Tom', age: 18 })
const { name, age } = state          // 丢失响应式
const { name, age } = toRefs(state)  // 每个属性变成 ref，保持响应式

模板/渲染函数
  ↓
编译器 compile()
  ↓
渲染函数 render()
  ↓
创建 VNode（虚拟 DOM 节点）
  ↓
渲染器 renderer
  ↓  首次渲染
创建真实 DOM（mount）
  ↓  后续更新
Diff 新旧 VNode → 生成补丁（patch）
  ↓
最小化更新真实 DOM

interface VNode {
  type: string | Component  // 标签名或组件
  props: Record<string, any> // 属性
  children: VNode[] | string // 子节点
  key: string | number       // diff 时的 key
  patchFlag: number          // 编译期标记的动态部分
  dynamicProps: string[]     // 哪些 prop 是动态的
  shapeFlag: number          // 节点类型位标记
}

// 旧: [A, B, C, D, E]
// 新: [A, C, D, B, E]
// LIS: [A, C, D, E] → 只需移动 B

<div>
  <span class="static">不会变化的文本</span>
  <p>{{ dynamic }}</p>
</div>

// 静态节点提升到渲染函数外部，只创建一次
const _hoisted_1 = /*#__PURE__*/ _createElementVNode(
  "span", { class: "static" }, "不会变化的文本", -1 /* HOISTED */
)

function render(_ctx) {
  return _createElementVNode("div", null, [
    _hoisted_1,  // 直接复用，不重新创建
    _createElementVNode("p", null, _toDisplayString(_ctx.dynamic), 1 /* TEXT */)
  ])
}

传统 VNode diff:  遍历整棵树 O(全部节点)
Block diff:       遍历动态节点 O(动态节点数)

// 不缓存：每次渲染创建新函数
createElementVNode("button", { onClick: ctx.handleClick })

// 缓存：同一函数引用，避免子组件不必要的更新
createElementVNode("button", {
  onClick: _cache[0] || (_cache[0] = (...args) => ctx.handleClick(...args))
})

// 命名：use 前缀
// 接受响应式输入：用 toValue()（3.3+）统一 ref/getter/原始值
// 返回 refs：保持解构后的响应式
import { ref, onMounted, onUnmounted, toValue, type MaybeRefOrGetter } from 'vue'

export function useFetch(url: MaybeRefOrGetter<string>) {
  const data = ref(null)
  const error = ref(null)

  watchEffect(async () => {
    data.value = null
    error.value = null
    try {
      const res = await fetch(toValue(url))
      data.value = await res.json()
    } catch (e) {
      error.value = e
    }
  })

  return { data, error }
}

// 所有调用方式都有效：
useFetch('/api/users')
useFetch(urlRef)
useFetch(() => `/api/users/${props.id}`)

import { effectScope, onScopeDispose } from 'vue'

const scope = effectScope()
scope.run(() => {
  const count = ref(0)
  const doubled = computed(() => count.value * 2)
  watch(count, () => console.log(count.value))
  onScopeDispose(() => console.log('Scope disposed'))
})

// 一次性释放所有 effect、computed、watch
scope.stop()

<KeepAlive :include="['UserList', 'Settings']" :max="10">
  <component :is="currentTab" />
</KeepAlive>

<Teleport to="body" :disabled="isMobile" defer>
  <!-- defer (3.5+): 延迟到目标挂载后再传送 -->
  <div class="modal">...</div>
</Teleport>

<Suspense @pending @resolve @fallback>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <Spinner />
  </template>
</Suspense>

<!-- 模式切换 -->
<Transition name="fade" mode="out-in">
  <component :is="currentView" />
</Transition>

<!-- 首次渲染动画 -->
<Transition appear name="fade">
  <div>初始渲染也有过渡</div>
</Transition>

<!-- 列表过渡 -->
<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</TransitionGroup>

<!-- v-memo: 依赖不变则跳过更新 -->
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
  <ExpensiveComponent :item="item" />
</div>

<!-- v-once: 只渲染一次，后续跳过 -->
<span v-once>静态: {{ initialValue }}</span>

<!-- v-memo="[]" 等价于 v-once -->
<div v-memo="[]">永不更新</div>

export const useUserStore = defineStore('user', () => {
  const name = ref('Tom')
  const isAdmin = computed(() => name.value === 'admin')

  function login(newName: string) {
    name.value = newName
  }

  return { name, isAdmin, login }
})

const store = useUserStore()
const { name } = store             // 丢失响应式！
const { name } = storeToRefs(store) // 保持响应式

1. 导航被触发
2. beforeRouteLeave（失活组件）
3. beforeEach（全局前置）
4. beforeRouteUpdate（重用组件）
5. beforeEnter（路由配置）
6. 解析异步路由组件
7. beforeRouteEnter（激活组件）
8. beforeResolve（全局解析）
9. 导航确认
10. afterEach（全局后置）
11. DOM 更新
12. beforeRouteEnter 的 next 回调

router.beforeEach((to) => {
  const auth = useAuthStore()
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { name: 'login', query: { redirect: to.fullPath } }
  }
})

// 大型数据不需要深层响应式
const bigList = shallowRef<Item[]>([])

// 第三方实例不需要代理
const chart = markRaw(new Chart(element))

// 读取原始对象（不触发依赖）
const raw = toRaw(reactiveObj)

const routes = [
  {
    path: '/user',
    component: () => import('./views/User.vue') // 路由级懒加载
  }
]

// 异步组件
const AsyncComp = defineAsyncComponent(() => import('./HeavyChart.vue'))