Vue3 内置指令

关键要点

• Vue3 内置指令是一组以 v- 开头的预定义指令，用于简化模板操作，如数据绑定、事件处理和条件渲染。
• 主要包括 v-bind、v-on、v-model、v-if、v-for 等，研究表明它们显著提升开发效率。
• Vue3 优化了指令性能，新增 v-memo 用于缓存子树，增强性能。
• 指令支持简写（如 : 代替 v-bind，@ 代替 v-on）和修饰符（如 .prevent）。

什么是内置指令？

Vue3 内置指令是框架提供的特殊属性，直接应用于模板中的元素或组件，用于实现动态行为，如绑定数据、监听事件或控制渲染。它们无需额外注册，开箱即用，适合常见前端开发需求。

常用内置指令

以下是 Vue3 主要内置指令的功能概述：

指令	功能描述	示例
v-bind	动态绑定属性或 props，简写 :	:class="className"
v-on	绑定事件监听器，简写 @	@click="handleClick"
v-model	表单双向数据绑定	<input v-model="message">
v-if	条件渲染，控制元素是否渲染	<div v-if="isVisible">Show</div>
v-show	条件显示，切换 CSS display 属性	<div v-show="isVisible">Show</div>
v-for	列表渲染，遍历数组或对象	<li v-for="item in items">{{ item }}</li>
v-text	更新元素文本内容，类似 {{}}	<span v-text="msg"></span>
v-html	更新元素 innerHTML，注意 XSS 风险	<div v-html="rawHtml"></div>
v-once	渲染一次后不再更新	<span v-once>{{ msg }}</span>
v-memo	缓存模板子树，优化性能（Vue3 新增）	<div v-memo="[valueA, valueB]">...</div>
v-slot	指定插槽内容，简写 #	<template v-slot:header>...</template>
v-pre	跳过编译，显示原始 Mustache 语法	<span v-pre>{{ msg }}</span>
v-cloak	隐藏未编译模板，防止闪烁	<div v-cloak>{{ msg }}</div>

使用示例

以下是一个结合多种内置指令的示例：

<template>
  <div>
    <input v-model="message" placeholder="输入内容">
    <button @click="updateMessage">更新</button>
    <p v-if="message">你输入了：{{ message }}</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-html="rawHtml"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('')
const items = ref([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }])
const rawHtml = ref('<strong>加粗文本</strong>')

function updateMessage() {
  message.value = 'Hello, Vue3!'
}
</script>

---

详细报告

Vue3 的内置指令（Built-in Directives）是框架提供的核心功能，以 v- 开头的特殊属性，直接在模板中应用，用于实现数据绑定、事件处理、条件渲染等常见操作。以下是对 Vue3 内置指令的全面讲解，涵盖定义、功能、使用细节和注意事项。

背景与定义

内置指令是 Vue 模板语法的核心部分，设计目的是通过声明式的方式简化 DOM 操作和数据交互。Vue3 的内置指令在性能上得到优化，新增了 v-memo 等功能，增强了开发体验。研究表明，内置指令能减少手动 DOM 操作的代码量，提升开发效率和代码可读性。它们与自定义指令结合使用，可覆盖多种复杂场景。

内置指令详解

以下是 Vue3 所有内置指令的详细说明：

1. v-bind（简写 :）

• 功能：动态绑定 HTML 属性或组件 props，支持单属性、对象或数组绑定。
• 用法：:class="{ active: isActive }" 或 :style="styleObject"。
• 特性：
  • 支持动态属性名，如 :[attrName]="value"。
  • 支持对象语法，批量绑定属性，如 :class="{ active: isActive, error: hasError }"。
• 示例：
  vue <template> ¨K14K </template> ¨K15K
• 注意：v-bind 是最常用的指令，简写 : 提高代码简洁性。

1. v-on（简写 @）

• 功能：绑定事件监听器，响应用户交互（如点击、输入）。
• 用法：@click="handleClick" 或 @input="onInput($event)"。
• 修饰符：
  • .stop：阻止事件冒泡。
  • .prevent：阻止默认行为。
  • .once：事件仅触发一次。
  • .self：仅在事件目标为元素自身时触发。
  • .passive：优化滚动事件性能。
• 示例：
  vue <template> ¨K18K </template> ¨K17K
• 注意：修饰符可以组合使用，如 @click.stop.prevent。

1. v-model

• 功能：实现表单元素或自定义组件的双向数据绑定。
• 用法：<input v-model="message"> 或 <MyComponent v-model="value">。
• 修饰符：
  • .lazy：在 change 事件而非 input 事件更新。
  • .number：将输入值转为数字。
  • .trim：去除首尾空格。
• 自定义组件支持：需实现 modelValue prop 和 update:modelValue 事件。
• 示例：
  vue <template> <input v-model.number="age" type="number"> </template> ¨K20K
• 注意：仅适用于表单元素或支持双向绑定的组件，避免在非输入场景使用。

1. v-if

• 功能：根据条件渲染元素，未满足条件时元素不渲染到 DOM。
• 用法：<div v-if="condition">Content</div>。
• 相关指令：v-else、v-else-if。
• 示例：
  vue <template> ¨K21K ¨K22K ¨K23K </template> ¨K24K
• 注意：v-if 会销毁和重建 DOM，适合不频繁切换的场景。

1. v-show

• 功能：根据条件切换元素显示，通过 CSS display 属性控制。
• 用法：<div v-show="isVisible">Content</div>。
• 示例：
  vue <template> ¨K25K </template> ¨K26K
• 注意：元素始终存在于 DOM，适合频繁切换的场景。

1. v-for

• 功能：遍历数组或对象，渲染列表。
• 用法：<li v-for="item in items" :key="item.id">{{ item.name }}</li>。
• 特性：
  • 支持数组、对象、数字和字符串遍历。
  • 可解构，如 v-for="{ name, id } in items"。
• 示例：
  vue <template> ¨K28K </template> ¨K29K
• 注意：必须提供唯一的 :key 属性，优化渲染性能。

1. v-text

• 功能：更新元素的文本内容，类似 {{}} 插值。
• 用法：<span v-text="msg"></span>。
• 示例：
  vue <template> <span v-text="msg"></span> </template> ¨K30K
• 注意：优先使用 {{}}，v-text 适合避免插值闪烁。

1. v-html

• 功能：更新元素的 innerHTML，渲染 HTML 内容。
• 用法：<div v-html="rawHtml"></div>。
• 示例：
  vue <template> ¨K31K </template> ¨K32K
• 注意：存在 XSS 风险，需使用消毒库（如 DOMPurify）处理用户输入。

1. v-once

• 功能：元素或组件仅渲染一次，后续数据变化不触发更新。
• 用法：<span v-once>{{ msg }}</span>。
• 示例：
  vue <template> <span v-once>{{ msg }}</span> </template> ¨K33K
• 注意：适合静态内容，减少不必要的渲染开销。

1. v-memo（Vue3 新增）
   • 功能：缓存模板子树，仅在依赖值变化时更新。
   • 用法：<div v-memo="[valueA, valueB]">...</div>。
   • 示例：
   <template> <div v-memo="[count]"> <p>Count: {{ count }}</p> </div> </template> <script setup> import { ref } from 'vue' const count = ref(0) </script>
   • 注意：适合优化复杂子树的渲染性能，需明确依赖项。
2. v-slot（简写 #）
   • 功能：指定组件插槽内容。
   • 用法：<template v-slot:default>...</template> 或 <template #default>...</template>。
   • 示例：
   <template> <MyComponent> <template #header> <h1>Header</h1> </template> </MyComponent> </template>
   • 注意：支持作用域插槽，需与组件的 v-bind 配合。
3. v-pre
   • 功能：跳过元素及其子元素的编译，显示原始 Mustache 语法。
   • 用法：<span v-pre>{{ msg }}</span>。
   • 示例：
   <template> <span v-pre>{{ this will not be compiled }}</span> </template>
   • 注意：适合展示代码片段或跳过不需编译的内容。
4. v-cloak
   • 功能：隐藏未编译的模板，防止页面加载闪烁。
   • 用法：<div v-cloak>{{ msg }}</div>，配合 CSS [v-cloak] { display: none }。
   • 示例：
     vue <template> ¨K46K </template> ¨K47K
   • 注意：现代构建工具（如 Vite）已减少闪烁问题，使用场景较少。

实践建议

• 使用简写：优先使用 : 和 @ 简写，减少代码冗余。
• 选择 v-if 或 v-show：频繁切换用 v-show，不常切换用 v-if。
• 确保 :key 唯一：v-for 中，:key 应绑定唯一值，避免渲染错误。
• 防范 XSS：使用 v-html 时，务必消毒用户输入。
• 优化性能：利用 v-memo 和 v-once 减少不必要的渲染。

Vue3 中的变化

与 Vue2 相比，Vue3 的内置指令有以下改进：

• 性能优化：指令编译和运行时性能提升，减少 DOM 操作开销。
• 新增 v-memo：提供子树缓存功能，优化复杂模板性能。
• 修饰符增强：v-model 支持自定义修饰符，灵活性更强。
• 插槽语法：v-slot 统一了插槽写法，简写 # 更简洁。

总结

Vue3 的内置指令是模板开发的核心工具，覆盖了数据绑定、事件处理、条件渲染和列表渲染等常见需求。它们无需额外配置，开箱即用，结合简写和修饰符能显著提高开发效率。开发者应根据场景选择合适的指令，并注意性能优化和安全问题。

---

关键引文

• Vue.js 官方文档 – 内置指令
• 菜鸟教程 – Vue3 指令
• Vue3 内置指令详解