Vue3：指令速查表（内置和自定义）
内容提要
Vue.js是一个流行的JavaScript框架，通过指令可以轻松操作DOM。它具有多个内置指令，如v-text、v-html、v-show、v-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-once和v-memo。此外，还可以创建自定义指令以满足应用程序的特定需求。自定义指令可以在组件中局部声明，也可以在整个应用程序中全局声明。它们可以具有修饰符以添加额外的行为。创建自定义指令可以改善应用程序的布局控制，并简化元素之间的状态同步。
延伸解读
v-if 与 v-show 的本质区别
文章明确指出，v-if、v-else-if 和 v-else 会根据条件完全销毁或重建 DOM 元素，而 v-show 仅通过切换 CSS 的 display 属性来控制显示。这意味着频繁切换显示状态时，v-show 的性能开销更小；而条件很少改变时，v-if 更合适，因为它不渲染隐藏元素。理解这一差异有助于在开发中做出正确选择。
v-for 中 key 的重要性
文章强调使用 v-for 时必须提供 :key 属性，且其值应唯一。推荐使用数据项自身的唯一标识（如 user.name），而不是数组索引。因为当需要操作数组项时，使用索引可能导致渲染错误。这一细节常被忽略，但直接影响列表更新的正确性和性能。
v-memo 与计算属性的关系
文章指出 v-memo 用于微优化渲染，它缓存内容并仅在依赖变化时更新，行为类似计算属性。如果组件逻辑已遵循最佳实践（例如使用计算属性），则几乎不需要 v-memo。这提醒开发者不要过度使用该指令，而应优先考虑代码结构的合理性。
自定义指令的注册与复用
文章展示了自定义指令可以局部声明（在组件内）或全局注册（在 main.js 中）。局部声明适合单个组件使用，而全局注册能避免重复代码，方便在多个组件中复用。此外，自定义指令支持修饰符，通过 binding.modifiers 可以灵活扩展功能，满足复杂业务需求。
Q&A
Vue.js的内置指令有哪些？
Vue.js的内置指令包括v-text、v-html、v-show、v-if、v-else-if、v-else、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-once和v-memo。
如何创建自定义指令？
自定义指令可以通过定义一个对象并包含生命周期钩子来创建，钩子接收要使用指令的元素作为参数。
v-if和v-show有什么区别？
v-if会根据条件完全销毁或重建DOM元素，而v-show仅通过改变元素的display属性来控制显示与隐藏。
v-model指令的作用是什么？
v-model指令用于实现双向数据绑定，简化输入元素的状态同步。
如何使用v-for指令遍历数组？
使用v-for指令可以通过语法`v-for='item in items'`遍历数组，并渲染每个元素。
自定义指令可以使用修饰符吗？
是的，自定义指令可以使用修饰符，修饰符可以在指令的声明中定义，以增强指令的功能。
