🔍Vue 隐藏神技巧：99% 开发者没用过，却能让代码简洁 50%

用 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 代码 更短、更快、更易读 ------ 面试答出任意一条，直接加分！