用 30 秒学会 7 个“官方没大声宣传”的小技巧，模板、组合式、性能全覆盖，复制即用。
1️⃣ v-memo —— 模板级记忆化
场景：列表渲染后项不变，却反复 diff
<template>
<ul>
<li v-for="item in list" :key="item.id" v-memo="[item.text]">
{{ item.text }}
</li>
</ul>
</template>
比
computed更轻量，依赖变化时才 patch，Vue3 专属。
2️⃣ defineOptions —— 单文件内设置组件名
场景：想用 <script setup> 又要 name
<script setup>
defineOptions({ name: 'MyCard' });
</script>
无需额外
<script>块，一行搞定。
3️⃣ useTemplateRef —— 安全的模板引用
场景：组合式里拿 DOM，告别 ref(null) 魔术字符串
<script setup>
const canvas = useTemplateRef('canvas');
onMounted(() => canvas.value?.getContext('2d'));
</script>
<template>
<canvas ref="canvas"></canvas>
</template>
4️⃣ defineExpose —— 精准暴露子组件 API
场景：父组件只调用子组件特定方法
<!-- Child.vue -->
<script setup>
const open = () => console.log('open');
defineExpose({ open });
</script>
<!-- Parent.vue -->
<Child ref="child" @click="child.open()" />
5️⃣ v-bind CSS 变量注入
场景：主题色一键切换
<template>
<div :style="{ '--color': color }">Hello</div>
</template>
<style scoped>
div { color: var(--color); }
</style>
6️⃣ v-once 静态节点
场景：纯展示文本，永不更新
<p v-once>{{ staticText }}</p>
编译时直接输出静态 HTML，零 diff 开销。
7️⃣ defineAsyncComponent 懒加载路由
场景：路由级代码分割，首屏瘦身
const Home = defineAsyncComponent(() => import('./Home.vue'));
与
Suspense搭配，首屏 JS -70%。
一句话总结
这 7 个技巧加起来，让 Vue 代码 更短、更快、更易读 —— 面试答出任意一条，直接加分！
