Vue 3 开发必备：模板语法、指令详解及常见面试题避坑指南

Vue 的模板语法、指令和插值是构建 Vue 应用的核心，它们为开发者提供了便捷的方式来实现数据与视图的绑定，以及丰富多样的交互效果。

一、插值：数据绑定的基础

1. 什么是插值？

插值（ Interpolation ）是 Vue 模板语法中用于将数据动态嵌入到 HTML 结构中的一种方式。

它允许开发者在模板中直接引用 Vue 实例中的数据，并实时展示其值。

简单来说，插值就像是在 HTML 页面里预留一个 “占位符”，Vue 会用实际的数据替换这个占位符，从而实现数据与视图的绑定。

2. 文本插值 {{ }}

文本插值使用双大括号 {{ }} 来嵌入数据，它不仅能显示简单的字符串，还支持简单的 JavaScript 表达式运算。

html
 代码解读
复制代码
<template>
  <div>
    
    <p>{{ message }}p>
    
    <p>{{ 2 + 3 }}p>
    
    <p>{{ isTrue? 'Yes' : 'No' }}p>
  div>
template>

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

// 定义响应式变量 message，值为 'Hello, Vue!'
const message = ref('Hello, Vue!');
// 定义响应式变量 isTrue，值为 true
const isTrue = ref(true);
script>

不过，在双大括号中只能使用简单的表达式，不能使用语句，如 if 语句、for 循环等。这是因为插值表达式的目的是简洁地计算并显示数据，而不是执行复杂的逻辑。

自动转义机制：Vue 会自动对插值内容进行转义，以防止 XSS 攻击。

XSS 攻击，即跨站脚本攻击（Cross-Site Scripting），是一种常见的 web 安全漏洞。攻击者通过注入恶意的脚本代码（如 JavaScript）到网页中，当用户访问该网页时，这些恶意脚本就会在用户的浏览器中执行，从而可能窃取用户的敏感信息（如 cookie、登录凭证等）、篡改页面内容或进行其他恶意操作。

例如，当我们插入包含 HTML 标签的字符串时，这些标签会被转义为 HTML 实体。

html
 代码解读
复制代码
<template>  
  <div>  
      
    <p>{{ '<div>Hellodiv>' }}p>  
  div>  
template>

上述代码会输出 <div>Hello</div>，而不是渲染成一个 div 元素。

  • 这与 v-html 指令形成鲜明对比，v-html 会直接渲染 HTML 代码，使用时需要格外注意安全问题。

3. 原始 HTML 插值 v-html

当我们需要将数据以 HTML 的形式渲染到页面上时，可以使用 v-html 指令。

html
 代码解读
复制代码
    <template>  
      <div>  
          
        <div v-html="rawHtml">div>  
      div>  
    template>  

    <script>  
    export default {  
      data() {  
        return {  
          rawHtml: 'This is red text'  
        };  
      }  
    };  
    script>

⚠️ v-html 存在安全风险，它会直接渲染传入的 HTML 代码。如果这些代码来自用户输入或者不可信的来源，可能会导致XSS攻击。

二、指令：动态交互的核心

1. 什么是指令

指令（Directives）是一种特殊的 HTML 属性（ Attribute ），用于为 HTML 元素添加特殊的逻辑或行为。它以 v- 为前缀（部分有简写形式）。

普通 HTML 属性（如 class、id、href 等）主要用于定义元素的静态特性，其值通常是静态的，直接由浏览器进行渲染。

与普通的 HTML 属性不同，指令本质上是 Vue 对 DOM 操作的封装，通过元素标签上声明指令，开发者无需直接操作 DOM，而是通过声明式语法控制元素的渲染方式、响应事件、绑定数据等，从而实现数据驱动视图的动态更新。

2. 属性绑定 v-bind

动态绑定 class/style :v-bind 指令用于将 Vue 实例中的数据绑定到 HTML 元素的属性上。常见的应用场景包括动态绑定 class 和 style 属性。

v-bind 可以简写为 :，这是一种更简洁的写法。

html
 代码解读
复制代码
<template>  
  <div>  
      
    <p :class="{ active: isActive, 'text-bold': isBold }">This is a paragraphp>  
      
    <p :style="{ color: textColor, fontSize: fontSize + 'px' }">This is another paragraphp>  
  div>  
template>  

<script>  
export default {  
  data() {  
    return {  
      isActive: true,  
      isBold: false,  
      textColor: 'blue',  
      fontSize: 16  
    };  
  }  
};  
script>

上述代码中，class 属性使用对象语法动态切换类名，style 属性使用对象语法动态设置样式。

3. 条件渲染

v-if vs v-show

v-if 和 v-show 都用于根据条件显示或隐藏元素，但它们的实现方式和性能特点有所不同。

指令实现方式性能特点适用场景
v-if惰性渲染：条件为假时不渲染或移除 DOM 元素，为真时插入 DOM条件少变时性能优，频繁操作 DOM 开销大条件不常变场景
v-show始终渲染，通过切换元素的 display 属性控制显隐频繁切换性能优，因为不涉及 DOM 增删条件频繁变场景
html
 代码解读
复制代码
<template>  
  <div>  
      
    <p v-if="score >= 90">优秀p>  
    <p v-else-if="score >= 60">及格p>  
    <p v-else>不及格p>  
      
    <p v-show="isVisible">This is visiblep>  
  div>  
template>  

<script>  
export default {  
  data() {  
    return {  
      score: 80,  
      isVisible: true  
    };  
  }  
};  
script>

v-else-if 和 v-else 的使用

v-else-if 和 v-else 是 v-if 的补充指令，用于实现多条件判断。它们必须紧跟在同级的 v-if 或 v-else-if 之后，且所有分支必须共享同一个父元素，否则无效。