外观
Vue 模板渲染与性能
- 状态：未准备
- 适用方向：前端 / Go 全栈
- 最近复习：待填写
- 下次复习：待安排
一句话回答
Vue 将模板编译成渲染函数，结合响应式依赖和编译期提示减少运行时更新工作；稳定 key 保障节点身份，性能优化仍应由真实瓶颈和测量决定。
原理解释
v-if 与 v-show
v-if 按条件创建或销毁分支，初始为假时可以不创建内容；v-show 始终渲染，通过 display 切换可见性，通常更适合频繁切换且内容不昂贵的区域。v-show 不触发组件卸载，因此不能依靠它关闭媒体、连接或定时器。
Vue 3 中，同一元素上的 v-if 优先于 v-for，条件不能按这种写法访问循环变量。可提前用 computed 过滤，或在外层 template 组织条件。v-show 不支持 template 上的分组，也不能配合 v-else。
vue
<script setup lang="ts">
import { ref, computed } from 'vue'
const rows = ref([{ id: 'a', text: '你好', visible: true }])
const visibleRows = computed(() => rows.value.filter(row => row.visible))
</script>
<template>
<ul>
<li v-for="row in visibleRows" :key="row.id">{{ row.text }}</li>
</ul>
</template>key 与 diff
虚拟 DOM 是描述 UI 的 JavaScript 结构，更新时比较前后描述并调整真实节点；它不是天然比直接操作 DOM 更快。key 用于区分同级节点身份，稳定业务 ID 有助于移动和复用；下标在排序、插入时可能复用错误的输入或局部状态，随机 key 则破坏复用。
Vue 3 的常见 keyed children 更新实现包括前后同步、处理中间区间，并利用最长递增子序列减少已有节点移动。这个算法不是所有更新场景都执行的固定流程，也不能推出整个应用更新永远是 O(n)。
编译器如何帮助优化？
编译器能识别静态内容和动态绑定，使用静态提升/缓存、patch flag 和 block 等信息缩小更新检查范围。具体输出与版本及编译选项相关；模板也支持编译成渲染函数，不意味着浏览器每次更新都重新解析模板字符串。
场景与边界
优先减少不必要的组件更新与大列表 DOM，保持传给子组件的 props 稳定，按需加载路由或重组件。v-once 用于一次性渲染，v-memo 可按依赖跳过子树更新，但依赖遗漏会让界面不更新。shallowRef 与不可变更新可降低大型数据的深层代理成本，不适合盲目替换所有响应式对象。
Teleport 改变内容在 DOM 的落点，组件的逻辑父子关系仍保留，适合弹窗等场景；还需处理焦点与样式。v-html 绕过普通文本转义，不能直接接收不可信 HTML。
项目中的应用
暂无 Vue 实现。可用 SimulSpeak 字幕面板 练习稳定 key 与同句修订，用 Blog 练习移动目录的条件显示。不要据此宣称已完成 Vue 重构或性能优化。
常见追问
- key 只为提高速度吗？ 也决定复用语义和局部状态正确性，性能只是其中一面。
- 隐藏标签页还会请求吗？ v-show 不会自动停止业务逻辑，需明确暂停策略。
- 组件拆得越细越好吗？ 组件抽象和实例都有成本，应按职责拆分并用 DevTools/Performance 测量。