1️⃣ v-memo —— 模板级记忆化优化

适用场景：列表项内容不变，却频繁触发 diff 比较。

vue

<template>
  <ul>
    <li v-for="item in list" :key="item.id" v-memo="[item.text]">
      {{ item.text }}
    </li>
  </ul>
</template>

✅ 比 computed 更轻量，仅在依赖变化时触发 patch，是 Vue 3 专属的性能利器。

---

2️⃣ defineOptions —— 轻松定义组件名

适用场景：在使用 <script setup> 语法时，仍希望指定组件名称。

vue

<script setup>
defineOptions({ name: 'MyCard' });
</script>

✅ 无需引入额外的 <script> 块，一行代码即可完成组件命名。

---

3️⃣ useTemplateRef —— 更安全的模板引用

适用场景：在组合式 API 中获取 DOM 元素，告别 ref(null) 的“魔术字符串”。

vue

<script setup>
const canvas = useTemplateRef('canvas');
onMounted(() => canvas.value?.getContext('2d'));
</script>

<template>
  <canvas ref="canvas"></canvas>
</template>

✅ 类型安全，语义清晰，避免引用混淆。

---

4️⃣ defineExpose —— 精确暴露子组件方法

适用场景：父组件仅需调用子组件的特定方法。

vue

<!-- Child.vue -->
<script setup>
const open = () => console.log('open');
defineExpose({ open });
</script>

<!-- Parent.vue -->
<Child ref="child" @click="child.open()" />

✅ 精准控制暴露内容，增强组件封装性。

---

5️⃣ v-bind + CSS 变量 —— 动态主题切换

适用场景：实现动态主题色或样式变量注入。

vue

<template>
  <div :style="{ '--color': color }">Hello</div>
</template>

<style scoped>
div { color: var(--color); }
</style>

✅ 样式与状态解耦，轻松实现动态换肤。

---

6️⃣ v-once —— 静态内容优化

适用场景：渲染纯静态内容，无需响应式更新。

vue

<p v-once>{{ staticText }}</p>

✅ 编译为静态 HTML，彻底避免后续 diff 开销。

---

7️⃣ defineAsyncComponent —— 路由级懒加载

适用场景：实现路由组件按需加载，优化首屏性能。

javascript

const Home = defineAsyncComponent(() => import('./Home.vue'));

✅ 结合 <Suspense> 使用，首屏 JS 体积最高可减少 70%！

---

💡 总结

掌握这 7 个 Vue 开发技巧，能让你的代码更简洁、性能更高、可读性更强 —— 无论是日常开发还是技术面试，都能轻松加分，展现你的技术深度！