条件渲染

<template>
  <!-- 基础条件 -->
  <p v-if="score >= 90">优秀</p>
  <p v-else-if="score >= 60">及格</p>
  <p v-else>不及格</p>

  <!-- 在 template 上使用（无需额外 DOM 元素） -->
  <template v-if="isLoggedIn">
    <h1>Welcome!</h1>
    <p>Here are your notifications</p>
  </template>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const score = ref(85)
const isLoggedIn = ref(true)
</script>

<template>
  <!-- v-show 始终渲染，切换 display -->
  <p v-show="visible">通过 CSS display 控制显隐</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const visible = ref(true)
</script>

// benchmark-v-if-vs-v-show.ts
// 使用 Chrome DevTools Performance API 进行精确测量

interface BenchmarkResult {
  fcp: number        // First Contentful Paint (ms)
  cls: number        // Cumulative Layout Shift score
  switchTime: number // 首次切换耗时 (ms)
  memoryDelta: number // 内存增量 (MB)
}

async function benchmark(name: string, count: number): Promise<BenchmarkResult> {
  // 预热：清除缓存
  performance.clearResourceTimings()
  if (performance.memory) performance.memory.gc?.()
  
  const memoryBefore = performance.memory?.usedJSHeapSize ?? 0
  
  // 测量初始渲染 FCP
  const paintObserver = new PerformanceObserver((list) => {
    const entries = list.getEntriesByName('first-contentful-paint')
    if (entries.length > 0) {
      fcp = entries[0].startTime
    }
  })
  paintObserver.observe({ type: 'paint', buffered: true })
  
  // 创建包含 N 个节点的条件块
  const startTime = performance.now()
  const app = createApp({
    template: `
      <div>
        <div ${name === 'v-if' ? 'v-if="visible"' : 'v-show="visible"'} class="container">
          <div v-for="i in ${count}" :key="i" class="item">
            <span>{{ i }}</span>
            <p>Item description for element number {{ i }}</p>
          </div>
        </div>
      </div>
    `,
    setup() {
      const visible = ref(true)
      return { visible }
    }
  })
  app.mount('#app')
  
  await nextTick()
  
  // 测量切换性能：隐藏 → 显示（连续 10 次取中位数）
  const switchTimes: number[] = []
  for (let i = 0; i < 10; i++) {
    const swStart = performance.now()
    app._instance!.proxy.visible = !app._instance!.proxy.visible
    await nextTick()
    switchTimes.push(performance.now() - swStart)
  }
  
  const memoryAfter = performance.memory?.usedJSHeapSize ?? 0
  paintObserver.disconnect()
  
  return {
    fcp,
    cls: 0, // 由 Layout Instability API 事后计算
    switchTime: median(switchTimes),
    memoryDelta: (memoryAfter - memoryBefore) / 1024 / 1024
  }
}

// ── 决策辅助函数 ──
interface VisibilityConfig {
  /** 预计切换频率（次/秒），-1 表示未知 */
  toggleFrequency: number
  /** 子树包含的 DOM 节点数 */
  childNodeCount: number
  /** 是否在首屏渲染时通常为隐藏状态 */
  initiallyHidden: boolean
  /** 是否包含图片/iframe 等重资源 */
  hasHeavyResources: boolean
}

function recommendVisibilityStrategy(config: VisibilityConfig): 'v-if' | 'v-show' {
  const { toggleFrequency, childNodeCount, initiallyHidden, hasHeavyResources } = config
  
  // 规则 1：包含重资源且初始隐藏 → v-if（避免不必要的资源加载）
  if (hasHeavyResources && initiallyHidden) return 'v-if'
  
  // 规则 2：子节点 > 5000 且初始隐藏 → v-if（节省大量内存）
  if (childNodeCount > 5000 && initiallyHidden) return 'v-if'
  
  // 规则 3：高频切换（> 0.5 次/秒） → v-show
  if (toggleFrequency > 0.5) return 'v-show'
  
  // 规则 4：子节点 < 100 → v-show（切换体验更流畅）
  if (childNodeCount < 100) return 'v-show'
  
  // 默认：低频切换、中等规模 → v-if（内存更友好）
  return 'v-if'
}

// 使用示例
const strategy = recommendVisibilityStrategy({
  toggleFrequency: 2,          // 每秒切换 2 次
  childNodeCount: 50,
  initiallyHidden: false,
  hasHeavyResources: false
})
console.log(strategy) // 'v-show'

<template>
  <!-- v-if 控制组件挂载/卸载，KeepAlive 缓存组件状态 -->
  <KeepAlive>
    <HeavyComponent v-if="tab === 'heavy'" />
  </KeepAlive>
  <KeepAlive>
    <AnotherComponent v-if="tab === 'another'" />
  </KeepAlive>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const tab = ref<'heavy' | 'another'>('heavy')
</script>

<template>
  <!-- 不加 key：Vue 复用 input 元素，输入内容保留 -->
  <template v-if="loginType === 'username'">
    <label>用户名</label>
    <input placeholder="输入用户名" key="username-input">
  </template>
  <template v-else>
    <label>邮箱</label>
    <input placeholder="输入邮箱" key="email-input">
  </template>
  <button @click="toggleType">切换登录方式</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const loginType = ref<'username' | 'email'>('username')

function toggleType() {
  loginType.value = loginType.value === 'username' ? 'email' : 'username'
}
</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const loading = ref(true)
const error = ref<string | null>(null)
const data = ref<unknown>(null)

onMounted(async () => {
  try {
    const res = await fetch('/api/data')
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    data.value = await res.json()
  } catch (e) {
    error.value = (e as Error).message
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div class="container">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else class="content">{{ data }}</div>
  </div>
</template>

<template>
  <AdminPanel v-if="user.role === 'admin'" />
  <EditorPanel v-else-if="user.role === 'editor'" />
  <UserPanel v-else-if="user.role === 'user'" />
  <GuestPanel v-else />
</template>

<template>
  <Transition name="fade">
    <div v-if="show" class="notification" :class="type">
      {{ message }}
    </div>
  </Transition>
</template>

<template>
  <!-- ❌ v-if 和 v-for 不要用在同一元素上 -->
  <!-- <li v-for="item in items" v-if="item.active" :key="item.id"> -->

  <!-- ✅ 用 computed 过滤 -->
  <li v-for="item in activeItems" :key="item.id">{{ item.name }}</li>

  <!-- ✅ 或嵌套 template -->
  <template v-for="item in items" :key="item.id">
    <li v-if="item.active">{{ item.name }}</li>
  </template>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const activeItems = computed(() =>
  items.value.filter(item => item.active)
)
</script>

// ── 简化版 Vue 3 编译器源码 ──
// 来源：packages/compiler-core/src/transforms/vIf.ts

import { 
  NodeTypes, 
  CREATE_COMMENT, 
  ConditionalExpression,
  createConditionalExpression,
  createCallExpression,
  createSimpleExpression,
} from '@vue/compiler-core'

// v-if 的 transform 入口
export const transformIf = createStructuralDirectiveTransform(
  /^(if|else|else-if)$/,
  (node, dir, context) => {
    // 1. 将当前 node 转换为 IF 节点
    return processIf(node, dir, context, (ifNode, branch) => {
      // 2. 处理子节点
      return processCodegen(ifNode, branch, context)
    })
  }
)

function processIf(
  node: ElementNode,
  dir: DirectiveNode,
  context: TransformContext,
  processCodegen: (ifNode: IfNode, branch: IfBranchNode) => void
) {
  const ifNode: IfNode = {
    type: NodeTypes.IF,
    loc: node.loc,
    branches: [],
    codegenNode: undefined as any
  }
  
  // 收集所有分支：当前 node 及其后续兄弟节点的 v-else-if/v-else
  let branch: IfBranchNode = {
    type: NodeTypes.IF_BRANCH,
    condition: dir.exp,        // v-if="expr" 中的 expr
    children: [/* 当前节点的子节点 */]
  }
  ifNode.branches.push(branch)
  
  // 遍历兄弟节点，收集 v-else-if 和 v-else
  let current = node
  while (current.nextSibling) {
    current = current.nextSibling
    const elseDirective = current.props.find(
      p => p.name === 'else-if' || p.name === 'else'
    )
    if (!elseDirective) break
    
    branch = {
      type: NodeTypes.IF_BRANCH,
      condition: elseDirective.name === 'else' 
        ? undefined                    // v-else：无条件，兜底分支
        : elseDirective.exp,          // v-else-if="expr"
      children: [/* current 的子节点 */]
    }
    ifNode.branches.push(branch)
  }
  
  return ifNode
}

// ── codegen 阶段：将 IF 节点转为 JavaScript AST ──
function processCodegen(
  ifNode: IfNode,
  branch: IfBranchNode,
  context: TransformContext
) {
  // 从最后一个分支开始，逐层构建嵌套三元表达式
  let operaIndex = ifNode.branches.length - 1
  let conditional = ifNode.branches[operaIndex].children[0].codegenNode
  
  // 反向遍历，构建嵌套的三元表达式链
  while (operaIndex-- > 0) {
    conditional = createConditionalExpression(
      ifNode.branches[operaIndex].condition!,   // 条件
      ifNode.branches[operaIndex].children[0].codegenNode,  // 真分支
      conditional                                 // 假分支（下一个 else-if 或 else）
    )
  }
  
  ifNode.codegenNode = conditional
}

// 模板：<div v-if="a">A</div><div v-else-if="b">B</div><div v-else>C</div>
// 生成等价代码：
function render(_ctx) {
  return _ctx.a 
    ? _ctx.createVNode("div", null, "A")
    : _ctx.b
      ? _ctx.createVNode("div", null, "B")
      : _ctx.createVNode("div", null, "C")
}

// ── 简化版 Vue 3 源码：v-show 的运行时代码 ──
// 来源：packages/runtime-dom/src/directives/vShow.ts

export const vShow: ObjectDirective<VShowElement> = {
  beforeMount(el, { value }, { transition }) {
    // 记录原始 display 值，用于恢复
    el._vod = el.style.display === 'none' ? '' : el.style.display
    
    if (transition && value) {
      // 有 Transition 组件包裹时，在 enter 完成后设置 display
      transition.beforeEnter(el)
    } else {
      setDisplay(el, value as boolean)
    }
  },
  
  mounted(el, { value }, { transition }) {
    if (transition && value) {
      transition.enter(el)
    }
  },
  
  updated(el, { value, oldValue }, { transition }) {
    if (!value === !oldValue) return  // 值未变化，跳过
    if (transition) {
      if (value) {
        transition.beforeEnter(el)
        setDisplay(el, true)
        transition.enter(el)
      } else {
        transition.leave(el, () => {
          setDisplay(el, false)
        })
      }
    } else {
      setDisplay(el, value as boolean)
    }
  },
  
  beforeUnmount(el, { value }) {
    setDisplay(el, value as boolean)
  }
}

function setDisplay(el: VShowElement, value: boolean): void {
  el.style.display = value ? el._vod : 'none'
}

// ── 编译器中的处理 ──
// v-show 不改变节点类型，仅将 vShow 指令挂载到 props 上
// 编译后等价于：
// withDirectives(createVNode("div", null, "content"), [[vShow, ctx.visible]])

<template>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>

  <!-- 带索引 -->
  <li v-for="(item, index) in items" :key="item.id">
    {{ index + 1 }}. {{ item.text }}
  </li>

  <!-- 解构 -->
  <li v-for="{ id, text } in items" :key="id">{{ text }}</li>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Todo {
  id: number
  text: string
}

const items = ref<Todo[]>([
  { id: 1, text: '学习 JavaScript' },
  { id: 2, text: '学习 Vue' },
  { id: 3, text: '创建一个项目' }
])
</script>

<template>
  <li v-for="(value, key, index) in user" :key="key">
    {{ index + 1 }}. {{ key }}: {{ value }}
  </li>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const user = reactive({
  name: '张三',
  age: 25,
  email: 'zhangsan@example.com'
})
</script>

<template>
  <!-- 渲染 1 到 10 -->
  <span v-for="n in 10" :key="n">{{ n }}</span>
</template>

<template>
  <!-- ✅ 使用唯一 ID -->
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>

  <!-- ❌ 使用索引（列表会排序/增删时） -->
  <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
</template>

// ── Vue 3 源码简化版 ──
// 来源：packages/runtime-core/src/renderer.ts
// 这是 Vue 3 Diff 算法的核心 —— 预处理 + 最长递增子序列

function patchKeyedChildren(
  c1: VNode[],  // 旧子节点数组
  c2: VNode[],  // 新子节点数组
  container: RendererElement,
  parentAnchor: RendererNode | null,
  parentComponent: ComponentInternalInstance | null,
  optimized: boolean
): void {
  let i = 0
  const l2 = c2.length
  let e1 = c1.length - 1  // 旧数组尾指针
  let e2 = l2 - 1         // 新数组尾指针

  // ── 阶段 1：从头部开始同步 ──
  // 同时从新旧数组的左侧开始遍历，key 相同的节点直接 patch 复用
  while (i <= e1 && i <= e2) {
    const n1 = c1[i]
    const n2 = c2[i]
    if (isSameVNodeType(n1, n2)) {
      // key 和 type 都相同 → 深度递归 patch（更新 props、children 等）
      patch(n1, n2, container, null, parentComponent, optimized)
    } else {
      break  // 遇到不同节点，停止头部同步
    }
    i++
  }

  // ── 阶段 2：从尾部开始同步 ──
  // 同时从新旧数组的右侧开始遍历
  while (i <= e1 && i <= e2) {
    const n1 = c1[e1]
    const n2 = c2[e2]
    if (isSameVNodeType(n1, n2)) {
      patch(n1, n2, container, null, parentComponent, optimized)
    } else {
      break
    }
    e1--
    e2--
  }

  // ── 阶段 3：处理剩余节点 ──
  
  // 情况 A：旧节点耗尽 → 挂载新节点
  // 例如：旧 [A, B] → 新 [A, B, C, D]
  //      头部同步后 i=2, e1=-1, e2=3 → 挂载 c2[2..3]
  if (i > e1) {
    if (i <= e2) {
      const nextPos = e2 + 1
      const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor
      while (i <= e2) {
        patch(null, c2[i], container, anchor, parentComponent, optimized)
        i++
      }
    }
  }
  
  // 情况 B：新节点耗尽 → 卸载旧节点
  // 例如：旧 [A, B, C, D] → 新 [A, B]
  //      头部同步后 i=2, e1=3, e2=1 → 卸载 c1[2..3]
  else if (i > e2) {
    while (i <= e1) {
      unmount(c1[i], parentComponent)
      i++
    }
  }
  
  // 情况 C：两边都有剩余 → 复杂序列处理（核心！）
  // 例如：旧 [A, B, C, D, E, F] → 新 [A, B, E, C, D, F]
  //      头尾同步后 i=2, e1=3, e2=3
  //      旧剩余 [C, D]   新剩余 [E, C, D]  → 需移动
  else {
    const s1 = i  // 旧剩余区间的起始索引
    const s2 = i  // 新剩余区间的起始索引

    // ── 步骤 1：构建旧节点 key → index 映射 ──
    const keyToNewIndexMap: Map<string | number | symbol, number> = new Map()
    for (i = s2; i <= e2; i++) {
      const nextChild = c2[i]
      if (nextChild.key !== null) {
        keyToNewIndexMap.set(nextChild.key, i)
      }
    }

    // ── 步骤 2：遍历旧剩余节点，确定哪些可复用 ──
    let j: number
    let patched = 0
    const toBePatched = e2 - s2 + 1           // 待处理的新节点数量
    let moved = false
    let maxNewIndexSoFar = 0
    
    // newIndexToOldIndexMap[i] = 旧节点在新序列中的位置索引
    // 0 = 新节点（需要挂载），非 0 = 可复用旧节点的在新序列中的位置
    const newIndexToOldIndexMap = new Array(toBePatched).fill(0)

    for (i = s1; i <= e1; i++) {
      const prevChild = c1[i]
      
      // 优化：当已 patch 数 >= 待 patch 数，剩下的旧节点直接卸载
      if (patched >= toBePatched) {
        unmount(prevChild, parentComponent)
        continue
      }

      // 在 key 映射中查找
      let newIndex: number | undefined
      if (prevChild.key != null) {
        newIndex = keyToNewIndexMap.get(prevChild.key)
      } else {
        // 无 key → 遍历查找同类型节点（性能较差）
        for (j = s2; j <= e2; j++) {
          if (
            newIndexToOldIndexMap[j - s2] === 0 &&
            isSameVNodeType(prevChild, c2[j])
          ) {
            newIndex = j
            break
          }
        }
      }

      if (newIndex === undefined) {
        // 旧节点在新序列中不存在 → 卸载
        unmount(prevChild, parentComponent)
      } else {
        // 记录映射关系
        newIndexToOldIndexMap[newIndex - s2] = i + 1  // +1 避免 0
        
        // 判断是否需要移动
        // maxNewIndexSoFar 是已遍历旧节点在新序列中的最大位置
        // 若当前 newIndex < maxNewIndexSoFar，说明发生了跨越，
        // 即当前旧节点在原序列中较后，但在新序列中较前 → 需要移动
        if (newIndex >= maxNewIndexSoFar) {
          maxNewIndexSoFar = newIndex
        } else {
          moved = true
        }
        
        // patch 这个可复用的节点
        patch(prevChild, c2[newIndex], container, null, parentComponent, optimized)
        patched++
      }
    }

    // ── 步骤 3：求最长递增子序列（LIS）以最小化移动 ──
    // increasingNewIndexSequence = LIS 在原数组 newIndexToOldIndexMap 中的索引
    // 这些索引对应的节点无需移动，其余节点需要移动
    const increasingNewIndexSequence = moved
      ? getSequence(newIndexToOldIndexMap)  // 算法复杂度 O(n log n)
      : []

    j = increasingNewIndexSequence.length - 1
    
    // ── 步骤 4：从后向前遍历新剩余节点，执行挂载/移动 ──
    for (i = toBePatched - 1; i >= 0; i--) {
      const nextIndex = s2 + i
      const nextChild = c2[nextIndex]
      const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor

      if (newIndexToOldIndexMap[i] === 0) {
        // 新节点：挂载
        patch(null, nextChild, container, anchor, parentComponent, optimized)
      } else if (moved) {
        // 可复用节点：根据 LIS 决定是否移动
        if (j < 0 || i !== increasingNewIndexSequence[j]) {
          // 不在 LIS 中 → 需要移动到正确位置
          move(nextChild, container, anchor, 2 /* MoveType.REORDER */)
        } else {
          // 在 LIS 中 → 位置正确，无需移动
          j--
        }
      }
    }
  }
}

// ── 辅助函数：判断两个 VNode 是否为相同类型 ──
function isSameVNodeType(n1: VNode, n2: VNode): boolean {
  return n1.type === n2.type && n1.key === n2.key
}

// ── 最长递增子序列（LIS）算法 ──
// 时间复杂度 O(n log n)，空间复杂度 O(n)
function getSequence(arr: number[]): number[] {
  const p = arr.slice()           // p[i] = arr[i] 在 lis 中的前驱索引
  const result: number[] = [0]    // result 存储 LIS 的索引序列
  
  let i: number, j: number, u: number, v: number, c: number
  const len = arr.length
  
  for (i = 0; i < len; i++) {
    const arrI = arr[i]
    if (arrI === 0) continue     // 新节点（newIndexToOldIndexMap[i] === 0），跳过
    
    j = result[result.length - 1]
    if (arr[result[j]] < arrI) {
      // arrI 大于 LIS 中最大值 → 追加到 LIS 末尾
      p[i] = j
      result.push(i)
      continue
    }
    
    // 二分查找 arrI 在 result 中应插入的位置
    u = 0
    v = result.length - 1
    while (u < v) {
      c = (u + v) >> 1
      if (arr[result[c]] < arrI) {
        u = c + 1
      } else {
        v = c
      }
    }
    
    // 替换为更小的值（贪心策略）
    if (arrI < arr[result[u]]) {
      if (u > 0) p[i] = result[u - 1]
      result[u] = i
    }
  }
  
  // 回溯构建最终的 LIS 索引序列
  u = result.length
  v = result[u - 1]
  while (u-- > 0) {
    result[u] = v
    v = p[v]
  }
  
  return result
}

// ── v-for 编译原理简化 ──
// 来源：packages/compiler-core/src/transforms/vFor.ts

// 模板：
// <li v-for="(item, index) in items" :key="item.id">{{ item.text }}</li>
//
// 编译为：
function render(_ctx) {
  return renderList(_ctx.items, (item, index) => {
    return createVNode("li", {
      key: item.id
    }, item.text)
  })
}

// ── renderList 运行时实现 ──
// 来源：packages/runtime-core/src/helpers/renderList.ts
export function renderList<T>(
  source: T[],
  renderItem: (value: T, index: number) => VNode
): VNode[] {
  const ret: VNode[] = []
  for (let i = 0; i < source.length; i++) {
    ret.push(renderItem(source[i], i))
  }
  return ret
}

// key 被作为 VNode.props.key 存储，
// 后续在 patchKeyedChildren 中被 keyToNewIndexMap 消费

import { ref } from 'vue'

const items = ref([1, 2, 3])

// 非变更方法返回新数组，需替换原数组
items.value = items.value.filter(n => n > 1)
items.value = items.value.map(n => n * 2)
items.value = items.value.concat([4, 5])
items.value = [...items.value, 6]

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Item {
  id: number
  name: string
  active: boolean
  price: number
}

const items = ref<Item[]>([...])
const filterText = ref('')
const sortKey = ref<'name' | 'price'>('name')

// 计算属性管道：过滤 → 排序
const processedItems = computed(() => {
  const filtered = items.value.filter(item =>
    item.name.toLowerCase().includes(filterText.value.toLowerCase())
  )
  return [...filtered].sort((a, b) => {
    if (sortKey.value === 'price') return a.price - b.price
    return a.name.localeCompare(b.name)
  })
})
</script>

<template>
  <input v-model="filterText" placeholder="搜索...">
  <select v-model="sortKey">
    <option value="name">按名称</option>
    <option value="price">按价格</option>
  </select>
  <li v-for="item in processedItems" :key="item.id">
    {{ item.name }} - ¥{{ item.price }}
  </li>
</template>

<!-- ❌ 不推荐：同一元素上同时使用 -->
<!-- <li v-for="item in items" v-if="item.active" :key="item.id"> -->

<!-- ✅ 方案1：computed 过滤 -->
<li v-for="item in activeItems" :key="item.id">{{ item.text }}</li>

<!-- ✅ 方案2：嵌套 template -->
<template v-for="item in items" :key="item.id">
  <li v-if="item.active">{{ item.text }}</li>
</template>

// ── Vue 3 编译器：指令处理优先级 ──
// 来源：packages/compiler-core/src/compile.ts

// 结构指令（v-if, v-for）在 transform 阶段按优先级处理
// v-if 的优先级定义为 20，v-for 的优先级定义为 10
// 数值越高越先处理

const DIRECTIVE_TRANSFORMS: Record<string, DirectiveTransform> = {
  if: transformIf,     // 优先级隐式更高：结构指令先处理
  for: transformFor,   // 在 v-if 之后处理
}

// 在 transformElement 中：
// 1. 先检查 v-if → 如果有，调用 transformIf，将节点转为 IF 节点
// 2. 再检查 v-for → 如果有，调用 transformFor
// 但 v-if 已经改变了节点类型，v-for 无法在 IF 节点上工作

<template>
  <!-- 技巧 1：多条件分组渲染 -->
  <!-- 同一组元素共享一个条件，无需额外 div 包裹 -->
  <template v-if="user.role === 'admin'">
    <h2>管理面板</h2>
    <AdminSidebar />
    <AdminContent />
    <AdminFooter />
  </template>
  <template v-else-if="user.role === 'editor'">
    <h2>编辑面板</h2>
    <EditorToolbar />
    <EditorContent />
  </template>
  <template v-else>
    <h2>只读面板</h2>
    <ReadonlyContent />
  </template>

  <!-- 技巧 2：v-for 与 v-if 的正确嵌套 -->
  <!-- 外层 template 承载 v-for，内层元素承载 v-if -->
  <template v-for="item in items" :key="item.id">
    <li v-if="item.type === 'task'">
      <TaskItem :data="item" />
    </li>
    <li v-else-if="item.type === 'event'">
      <EventItem :data="item" />
    </li>
    <li v-else>
      <DefaultItem :data="item" />
    </li>
  </template>

  <!-- 技巧 3：slot 条件分发 -->
  <template v-if="$slots.header">
    <header class="card-header">
      <slot name="header" />
    </header>
  </template>
  <div class="card-body">
    <slot />
  </div>
  <template v-if="$slots.footer">
    <footer class="card-footer">
      <slot name="footer" />
    </footer>
  </template>
</template>

// ── 对象属性的响应性 ──
import { reactive, ref } from 'vue'

// reactive 对象：添加新属性需要特殊处理
const state = reactive<Record<string, unknown>>({ name: 'Alice', age: 30 })

// ❌ 直接添加新属性不触发更新（Vue 3 中已修复，但仍需注意类型）
// state.newProp = 'value'  // Vue 3 中 reactive 支持新属性

// ✅ 更安全的做法：使用 ref 包裹整个对象
const user = ref({
  name: 'Alice',
  age: 30
})

// 替换整个对象以添加属性
user.value = {
  ...user.value,
  newProp: 'value'
}

// ── v-for 遍历 Map/Set ──
const mapData = reactive(new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]))

// Vue 3 支持直接遍历 Map
// <li v-for="[key, value] in mapData" :key="key">{{ key }}: {{ value }}</li>

// 但 Map 的 set/delete 在 reactive 中需要特殊处理
// 推荐使用 ref 包裹
const mapRef = ref(new Map<string, string>())

function addEntry(key: string, value: string) {
  // 触发响应式更新：替换整个 Map
  mapRef.value = new Map(mapRef.value).set(key, value)
}

<template>
  <!-- 条件渲染 + Teleport：将内容渲染到指定 DOM 节点 -->
  <Teleport to="body">
    <div v-if="showModal" class="modal-overlay">
      <div class="modal-content">
        <h2>{{ modalTitle }}</h2>
        <p>{{ modalContent }}</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </div>
  </Teleport>

  <!-- 条件渲染 + Suspense：异步组件的加载状态 -->
  <Suspense>
    <template #default>
      <AsyncDashboard v-if="ready" />
    </template>
    <template #fallback>
      <LoadingSkeleton v-if="!ready" />
    </template>
  </Suspense>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'

const showModal = ref(false)
const ready = ref(false)
const modalTitle = ref('')
const modalContent = ref('')

const AsyncDashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
)
</script>

<!-- TreeNode.vue：递归渲染树形结构 -->
<template>
  <li>
    <div class="node-content" @click="toggle">
      <span v-if="node.children?.length" class="arrow">
        {{ expanded ? '▼' : '▶' }}
      </span>
      {{ node.label }}
    </div>
    <ul v-if="expanded && node.children?.length">
      <!-- 递归调用自身 -->
      <TreeNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </ul>
  </li>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface TreeNodeData {
  id: string
  label: string
  children?: TreeNodeData[]
}

defineProps<{ node: TreeNodeData }>()
const expanded = ref(false)

function toggle() {
  expanded.value = !expanded.value
}
</script>

<script setup lang="ts">
import { ref } from 'vue'
import { useVirtualList } from '@vueuse/core'

const allItems = ref(
  Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    name: `Item ${i}`
  }))
)

const { list, containerProps, wrapperProps } = useVirtualList(
  allItems,
  { itemHeight: 50 }
)
</script>

<template>
  <div v-bind="containerProps" style="height: 400px; overflow-y: auto">
    <div v-bind="wrapperProps">
      <div
        v-for="{ data, index } in list"
        :key="data.id"
        style="height: 50px"
      >
        {{ index }}: {{ data.name }}
      </div>
    </div>
  </div>
</template>

// VirtualScroll.vue
// 生产级虚拟滚动组件：支持动态高度、条件筛选、键盘导航
// 零依赖，纯 Vue 3 Composition API + TypeScript

import { ref, computed, onMounted, onBeforeUnmount, watch, type CSSProperties } from 'vue'

// ── 类型定义 ──
interface VirtualScrollItem {
  id: string | number
  [key: string]: unknown
}

interface VirtualScrollProps {
  items: VirtualScrollItem[]
  itemHeight?: number          // 固定高度模式
  estimatedItemHeight?: number // 动态高度模式的预估高度
  bufferSize?: number          // 缓冲区大小（可视区外的额外渲染项数）
  overscan?: number            // 预渲染的额外项数
}

interface VisibleItem {
  data: VirtualScrollItem
  index: number
  offsetY: number
  height: number
}

// ── 核心 Composable ──
function useVirtualScroll(props: VirtualScrollProps) {
  const {
    items,
    itemHeight = 50,
    estimatedItemHeight = 50,
    bufferSize = 5,
    overscan = 3
  } = props

  // 容器引用
  const containerRef = ref<HTMLElement | null>(null)
  const scrollTop = ref(0)
  const containerHeight = ref(0)

  // 动态高度缓存：itemHeightMap[index] = 实际测量高度
  const itemHeightMap = ref<Map<number, number>>(new Map())
  
  // 累积高度缓存：用于二分查找
  const cumulativeHeights = ref<number[]>([])

  // ── 计算总高度 ──
  const totalHeight = computed(() => {
    if (itemHeightMap.value.size === 0) {
      return items.value.length * estimatedItemHeight
    }
    const lastIndex = items.value.length - 1
    return getOffsetByIndex(lastIndex) + getItemHeight(lastIndex)
  })

  // ── 获取指定索引项的高度 ──
  function getItemHeight(index: number): number {
    return itemHeightMap.value.get(index) ?? estimatedItemHeight
  }

  // ── 获取指定索引项的顶部偏移量（二分查找） ──
  function getOffsetByIndex(index: number): number {
    if (index <= 0) return 0
    
    // 如果所有项都是固定高度，直接计算
    if (itemHeightMap.value.size === 0) {
      return index * estimatedItemHeight
    }

    // 二分查找最近的有高度记录的索引
    const sortedIndices = Array.from(itemHeightMap.value.keys()).sort((a, b) => a - b)
    let offset = 0
    let lastKnownIndex = -1

    for (const knownIndex of sortedIndices) {
      if (knownIndex >= index) break
      if (lastKnownIndex >= 0) {
        // 两个已知高度之间的项使用预估高度
        const gap = knownIndex - lastKnownIndex - 1
        offset += gap * estimatedItemHeight
      }
      offset += itemHeightMap.value.get(knownIndex)!
      lastKnownIndex = knownIndex
    }

    // 处理最后一个已知索引到目标索引之间的项
    if (lastKnownIndex < index - 1) {
      offset += (index - lastKnownIndex - 1) * estimatedItemHeight
    }

    return offset
  }

  // ── 根据滚动偏移量二分查找起始索引 ──
  function findStartIndex(scrollOffset: number): number {
    if (itemHeightMap.value.size === 0) {
      return Math.floor(scrollOffset / estimatedItemHeight)
    }

    let low = 0
    let high = items.value.length - 1

    while (low <= high) {
      const mid = Math.floor((low + high) / 2)
      const offset = getOffsetByIndex(mid)

      if (offset < scrollOffset) {
        low = mid + 1
      } else if (offset > scrollOffset) {
        high = mid - 1
      } else {
        return mid
      }
    }

    return Math.max(0, high)
  }

  // ── 计算可见项 ──
  const visibleItems = computed<VisibleItem[]>(() => {
    const startIndex = Math.max(0, findStartIndex(scrollTop.value) - bufferSize)
    
    let accumulatedHeight = getOffsetByIndex(startIndex)
    let endIndex = startIndex
    const viewportBottom = scrollTop.value + containerHeight.value + overscan * estimatedItemHeight

    while (endIndex < items.value.length && accumulatedHeight < viewportBottom) {
      accumulatedHeight += getItemHeight(endIndex)
      endIndex++
    }

    endIndex = Math.min(items.value.length, endIndex + bufferSize)

    const result: VisibleItem[] = []
    let offsetY = getOffsetByIndex(startIndex)

    for (let i = startIndex; i < endIndex; i++) {
      result.push({
        data: items.value[i],
        index: i,
        offsetY,
        height: getItemHeight(i)
      })
      offsetY += getItemHeight(i)
    }

    return result
  })

  // ── 容器样式 ──
  const containerStyle = computed<CSSProperties>(() => ({
    height: `${containerHeight.value}px`,
    overflow: 'auto',
    position: 'relative'
  }))

  // ── 包裹层样式 ──
  const wrapperStyle = computed<CSSProperties>(() => ({
    height: `${totalHeight.value}px`,
    position: 'relative'
  }))

  // ── 滚动处理 ──
  function onScroll(event: Event) {
    scrollTop.value = (event.target as HTMLElement).scrollTop
  }

  // ── 更新项高度（用于动态高度模式） ──
  function updateItemHeight(index: number, height: number) {
    itemHeightMap.value.set(index, height)
    // 触发重新计算
    itemHeightMap.value = new Map(itemHeightMap.value)
  }

  // ── 滚动到指定索引 ──
  function scrollToIndex(index: number, behavior: ScrollBehavior = 'smooth') {
    const offset = getOffsetByIndex(index)
    containerRef.value?.scrollTo({ top: offset, behavior })
  }

  // ── ResizeObserver：监听容器尺寸变化 ──
  let resizeObserver: ResizeObserver | null = null

  onMounted(() => {
    if (containerRef.value) {
      containerHeight.value = containerRef.value.clientHeight
      resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
          containerHeight.value = entry.contentRect.height
        }
      })
      resizeObserver.observe(containerRef.value)
    }
  })

  onBeforeUnmount(() => {
    resizeObserver?.disconnect()
  })

  return {
    containerRef,
    visibleItems,
    containerStyle,
    wrapperStyle,
    totalHeight,
    onScroll,
    updateItemHeight,
    scrollToIndex
  }
}

<!-- VirtualScroll.vue 模板部分 -->
<template>
  <div
    ref="containerRef"
    :style="containerStyle"
    @scroll="onScroll"
    role="list"
    aria-label="虚拟滚动列表"
  >
    <div :style="wrapperStyle">
      <div
        v-for="{ data, index, offsetY, height } in visibleItems"
        :key="data.id"
        :style="{
          position: 'absolute',
          top: `${offsetY}px`,
          height: `${height}px`,
          width: '100%'
        }"
      >
        <slot name="item" :item="data" :index="index">
          <!-- 默认渲染 -->
          <div class="virtual-item">{{ index }}: {{ data }}</div>
        </slot>
      </div>
    </div>
  </div>
</template>

<!-- UserList.vue：10000 条用户数据 + 条件筛选 + 虚拟滚动 -->
<template>
  <div class="user-list-container">
    <!-- 工具栏：搜索 + 筛选 -->
    <div class="toolbar">
      <input
        v-model="searchQuery"
        type="text"
        placeholder="搜索用户..."
        class="search-input"
      />
      <select v-model="roleFilter" class="role-select">
        <option value="">全部角色</option>
        <option value="admin">管理员</option>
        <option value="editor">编辑者</option>
        <option value="viewer">观察者</option>
      </select>
      <select v-model="statusFilter" class="status-select">
        <option value="">全部状态</option>
        <option value="active">活跃</option>
        <option value="inactive">非活跃</option>
        <option value="banned">已禁用</option>
      </select>
      <span class="result-count">
        共 {{ filteredUsers.length }} 条结果
      </span>
    </div>

    <!-- 条件渲染：空状态 -->
    <div v-if="filteredUsers.length === 0" class="empty-state">
      <p>没有匹配的用户</p>
      <button @click="resetFilters">重置筛选条件</button>
    </div>

    <!-- 虚拟滚动列表 -->
    <VirtualScroll
      v-else
      :items="filteredUsers"
      :estimated-item-height="64"
      :buffer-size="8"
      :overscan="5"
    >
      <template #item="{ item, index }">
        <div
          class="user-row"
          :class="{ 'user-row--even': index % 2 === 0 }"
        >
          <img
            :src="item.avatar"
            :alt="item.name"
            class="user-avatar"
            loading="lazy"
          />
          <div class="user-info">
            <span class="user-name">{{ item.name }}</span>
            <span class="user-email">{{ item.email }}</span>
          </div>
          <span
            class="user-role"
            :class="`user-role--${item.role}`"
          >
            {{ roleLabels[item.role] }}
          </span>
          <span
            class="user-status"
            :class="`user-status--${item.status}`"
          >
            {{ statusLabels[item.status] }}
          </span>
        </div>
      </template>
    </VirtualScroll>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import VirtualScroll from './VirtualScroll.vue'

interface User {
  id: number
  name: string
  email: string
  avatar: string
  role: 'admin' | 'editor' | 'viewer'
  status: 'active' | 'inactive' | 'banned'
}

const roleLabels: Record<User['role'], string> = {
  admin: '管理员',
  editor: '编辑者',
  viewer: '观察者'
}

const statusLabels: Record<User['status'], string> = {
  active: '活跃',
  inactive: '非活跃',
  banned: '已禁用'
}

// 模拟 10000 条数据
const allUsers = ref<User[]>(
  Array.from({ length: 10000 }, (_, i) => ({
    id: i + 1,
    name: `用户 ${i + 1}`,
    email: `user${i + 1}@example.com`,
    avatar: `https://i.pravatar.cc/40?u=${i + 1}`,
    role: (['admin', 'editor', 'viewer'] as const)[i % 3],
    status: (['active', 'inactive', 'banned'] as const)[i % 3]
  }))
)

// 筛选状态
const searchQuery = ref('')
const roleFilter = ref('')
const statusFilter = ref('')

// 计算属性：过滤后的数据
const filteredUsers = computed(() => {
  let result = allUsers.value

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(
      u => u.name.includes(query) || u.email.toLowerCase().includes(query)
    )
  }

  if (roleFilter.value) {
    result = result.filter(u => u.role === roleFilter.value)
  }

  if (statusFilter.value) {
    result = result.filter(u => u.status === statusFilter.value)
  }

  return result
})

function resetFilters() {
  searchQuery.value = ''
  roleFilter.value = ''
  statusFilter.value = ''
}
</script>

<style scoped>
.user-list-container {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.toolbar {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
}

.search-input {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
}

.role-select,
.status-select {
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  background: white;
}

.result-count {
  font-size: 13px;
  color: #64748b;
  white-space: nowrap;
}

.empty-state {
  padding: 48px;
  text-align: center;
  color: #94a3b8;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s;
}

.user-row:hover {
  background-color: #f8fafc;
}

.user-row--even {
  background-color: #fafbfc;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-name {
  font-weight: 600;
  font-size: 14px;
}

.user-email {
  font-size: 12px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role,
.user-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.user-role--admin { background: #fef3c7; color: #92400e; }
.user-role--editor { background: #dbeafe; color: #1e40af; }
.user-role--viewer { background: #f3f4f6; color: #374151; }

.user-status--active { background: #dcfce7; color: #166534; }
.user-status--inactive { background: #f3f4f6; color: #6b7280; }
.user-status--banned { background: #fee2e2; color: #991b1b; }
</style>

<!-- ── Vue 2 写法 ── -->
<template>
  <!-- Vue 2: v-for 优先级高于 v-if，item 在 v-if 中可访问 -->
  <li v-for="item in items" v-if="item.active" :key="item.id">
    {{ item.name }}
  </li>
</template>

<!-- ── Vue 3 迁移写法 ── -->
<template>
  <!-- 方案 A: computed 过滤 -->
  <li v-for="item in activeItems" :key="item.id">
    {{ item.name }}
  </li>

  <!-- 方案 B: template 嵌套 -->
  <template v-for="item in items" :key="item.id">
    <li v-if="item.active">{{ item.name }}</li>
  </template>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const items = ref([
  { id: 1, name: 'A', active: true },
  { id: 2, name: 'B', active: false }
])

const activeItems = computed(() =>
  items.value.filter(item => item.active)
)
</script>

<!-- ── Vue 2: template v-for 的 key 放在子元素上 ── -->
<template v-for="item in items">
  <div :key="item.id">{{ item.name }}</div>
</template>

<!-- ── Vue 3: key 放在 template 上 ── -->
<template v-for="item in items" :key="item.id">
  <div>{{ item.name }}</div>
</template>

// ── Vue 2: 数组索引赋值需要 Vue.set ──
// this.$set(this.items, 0, newValue)
// this.items.splice(0, 1, newValue)

// ── Vue 3: 直接赋值即可 ──
const items = ref([1, 2, 3])
items.value[0] = 10        // ✅ 触发响应式更新
items.value.length = 0     // ✅ 触发响应式更新

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

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
.list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
.list-move {
  transition: transform 0.5s ease;
}
</style>

// ❌ 非响应式
const items = [1, 2, 3] // 普通数组

// ✅ 响应式
const items = ref([1, 2, 3])