Vue3 内置属性

关键要点

• Vue3 内置属性（Built-in Directives）是一组预定义的指令，用于简化模板中的常见操作。
• 常见指令包括 v-bind、v-on、v-model、v-if 等，支持动态绑定、事件处理和条件渲染。
• 它们开箱即用，无需额外注册，研究表明使用内置属性可显著提高开发效率。
• Vue3 优化了指令的性能，并支持与自定义指令结合使用。

什么是内置属性？

Vue3 的内置属性是框架提供的特殊指令，以 v- 开头，直接在模板中使用，用于操作 DOM 或绑定数据。它们涵盖了常见的前端开发需求，如数据绑定、事件监听、条件渲染和列表渲染等。

常用内置属性

以下是 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	缓存模板子树，优化性能	<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>

注意事项

• v-model 仅适用于表单元素或自定义组件，避免在非输入元素上使用。
• v-html 需警惕 XSS 攻击，确保内容经过消毒。
• v-for 需要配合 :key 使用，以优化渲染性能。
• v-memo 是 Vue3 新增指令，适合优化频繁更新的子树。

---

详细报告

Vue3 的内置属性（Built-in Directives）是框架提供的特殊指令，用于在模板中执行常见的前端操作，如数据绑定、事件处理、条件渲染和列表渲染等。这些指令以 v- 开头，无需额外注册即可使用，极大地简化了开发流程。以下是对 Vue3 内置属性的全面讲解，涵盖定义、功能、使用方式和注意事项。

背景与定义

内置属性是 Vue 框架的核心特性之一，设计目的是提供简洁的方式来操作 DOM 或绑定数据。它们在模板中以指令形式出现，例如 v-bind、v-on 等，直接作用于元素或组件。Vue3 优化了这些指令的性能，并引入了一些新指令（如 v-memo），以满足现代前端开发需求。研究表明，使用内置属性可以显著减少手动 DOM 操作的代码量，提高开发效率。

常用内置属性详解

以下是 Vue3 中所有内置属性的详细说明：

1. v-bind（简写 :）

• 功能：动态绑定 DOM 属性或组件的 props。
• 用法：<img :src="imageUrl"> 或 <div :class="{ active: isActive }">。
• 注意：支持动态属性名，如 :[attrName]="value"。
• 示例：
  vue <template> ¨K14K </template> ¨K15K

1. v-on（简写 @）

• 功能：绑定事件监听器，响应用户交互。
• 用法：@click="handleClick" 或 @input="onInput"。
• 修饰符：支持 .prevent（阻止默认行为）、.stop（阻止冒泡）、.once（触发一次）等。
• 示例：
  vue <template> <button @click.prevent="submit">提交</button> </template> ¨K16K

1. v-model

• 功能：在表单元素或组件上实现双向数据绑定。
• 用法：<input v-model="message">。
• 修饰符：.lazy（延迟更新）、.number（转换为数字）、.trim（去除首尾空格）。
• 注意：在自定义组件上，需实现 modelValue prop 和 update:modelValue 事件。
• 示例：
  vue <template> <input v-model.trim="message" placeholder="输入内容"> </template> ¨K17K

1. v-if

• 功能：根据条件渲染元素，未满足条件时元素不会渲染到 DOM。
• 用法：<div v-if="isVisible">显示</div>。
• 相关指令：v-else、v-else-if。
• 注意：相比 v-show，v-if 开销更大，适合不频繁切换的场景。
• 示例：
  vue <template> ¨K18K ¨K19K ¨K20K </template> ¨K21K

1. v-show

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

1. v-for

• 功能：遍历数组或对象，渲染列表。
• 用法：<li v-for="item in items" :key="item.id">{{ item.name }}</li>。
• 注意：必须使用 :key 提供唯一标识，优化渲染性能。
• 示例：
  vue <template> ¨K24K </template> ¨K25K

1. v-text

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

1. v-html

• 功能：更新元素的 innerHTML，允许渲染 HTML 内容。
• 用法：<div v-html="rawHtml"></div>。
• 注意：存在 XSS 风险，需确保内容安全（如通过消毒库处理）。
• 示例：
  vue <template> ¨K27K </template> ¨K28K

1. v-once

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

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>
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 }。
   • 注意：适合慢加载场景，但现代构建工具（如 Vite）已减少闪烁问题。
   • 示例：
     vue <template> ¨K39K </template> ¨K40K

实践建议

• 优先选择简写：如用 : 代替 v-bind，@ 代替 v-on，提高代码简洁性。
• 合理选择 v-if 和 v-show：频繁切换用 v-show，不常切换用 v-if。
• 确保 :key 的唯一性：在 v-for 中，:key 应绑定到唯一值，避免渲染错误。
• 安全使用 v-html：建议使用消毒库（如 DOMPurify）处理用户输入。

Vue3 中的变化

与 Vue2 相比，Vue3 的内置属性在性能和功能上有所优化：

• 性能提升：指令的编译和运行时性能更好，减少了不必要的 DOM 操作。
• 新指令：新增 v-memo，为性能优化提供了新工具。
• 修饰符增强：v-model 支持更多自定义修饰符，灵活性更强。

总结

Vue3 的内置属性是框架的核心功能，提供了简洁而强大的方式来处理数据绑定、事件监听和渲染逻辑。开发者可以直接在模板中使用这些指令，无需额外配置。通过合理选择和使用内置属性，可以显著提高开发效率和代码质量。

---

关键引文

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