Vue 3 常用指令总览

Vue 3 的指令是建立响应式 UI 的主要工具。掌握它们不仅能提高开发效率，还能帮助你规避常见的性能与可维护性痛点。

1️⃣ 指令基础与使用者痛点

指令以 v- 开头，是 Vue 用来在 DOM 上绑定行为的特殊属性。当指令表达式变化时DOM 会自动更新。说到常见问题，

• 忘记给动态列表设置唯一 key导致状态错乱、重复渲染。
• 误用 v-if频繁切换会导致多次销毁/创建节点，影响性能。怎么说呢，
• 滥用 v-html未做安全过滤可能引发 XSS 攻击。
• 没有合理拆分自定义指令业务代码混杂在组件内部，难以复用和测试。

再看示例，条件渲染与隐藏切换

这是一段条件渲染的内容

示例的观点是。双向绑定

✅ 支持表单元素还有自定义组件；可使用修饰符如 .trim。.number,或者组合修饰符体验更好。

至于示例，列表渲染与关键字键值关键性

{{ item.name }}

⚠️ 如果只使用索引作为 key。在插入/删除操作后会出现勾选状态错位、动画失效等问题。至于最优做法是，

1. 每个数据项都拥有唯一 id；
2. 在模板中使用该 id 做 key，例如： :key="item.id".
3. 避免对数组直接排序或修改时依赖索引。

再看实际案例，勾选状态错位演示

import { ref } from 'vue' const tasks = ref() const addItem = => { tasks.value.unshift。text:'新任务',done:false }) }

❌ 问题重现：

• 勾选 “写代码” 后点击 “添加新任务”，新任务被勾选，而原来的 “写代码” 被取消。
` --- ### ✅ 正确做法
• {{ task.text }}

结论永远不要把 index 当作 key 使用，除非列表完全静态且不支持排序/增删。

---

🔧 常见内置指令速查

@ / v-on – 事件绑定

vue 点击我 <\/button>` * 支持 .stop。.prevent,.once,.self,.capture 等修饰符。

: / v-bind – 属性/Prop 动态绑定

vue

链接<\/a>`

– 文本与 HTML 更新

指令	用途	风险
v-text	更新纯文本	无
v-html	插入 HTML	XSS

– 性能调整

指令	场景
v-pre	跳过编译。输出原始模板
v-once	静态内容，只渲染一次

---

🚀 自定义指令

js // main.js app.directive('focus',{ mounted { el.focus } })

使用方式的观点是，

vue

典型用途 - 自动聚焦输入框 - 懒加载图片 - 权限控制展示

---

📌 常用方法汇总

实践领域	建议

v-for + :key # 必须提供唯一 key，避免索引导致状态错乱。

v-if vs v-show # 条件变化少 → v-if;状态频繁切换 → v-show.

v-model 修饰符 # 使用 .trim。.number,.lazy,.debounce 提高 UX。

事件修饰符 # 合理使用 .prevent,.stop,.capture。.once.

自定义指令封装 # 封装通用 DOM 操作，如聚焦、滚动监听等，以提高复用性和可测试性。

安全防护 - v-html # 对外部来源进行严格过滤或禁止直接使用。推荐使用第三方库进行清洗。

---

🎯 小结

• 理解 指令不是语法糖，而是 Vue 响应式程序和虚拟 DOM 协同工作的结果。
• 熟练 内置指令并掌握其常用方法，可明显提高代码质量和应用性能。
• 关注痛点——如键值错误、频繁销毁、XSS 安全—可以帮助你避免不少潜在 Bug。

现在就回顾你的项目代码。检查是否满足以上准则，并逐步改进，让 Vue 应用更稳健、更高效！