面试题：Vue中插值表达式与指令的区别及应用场景

Question

请阐述Vue插值表达式和指令各自的特点，并且分别举例说明在何种场景下会优先使用插值表达式，何种场景下会优先使用指令。例如在展示文本数据和控制元素的显示隐藏方面，两者有什么不同的应用方式？

Answer 1

Vue插值表达式特点

1. 用于数据展示：主要功能是将数据插入到模板中进行展示，语法简单直观，使用{{ }}包裹要展示的数据。
2. 只能进行简单运算：可以进行一些基本的算术运算、字符串拼接以及三元表达式等简单逻辑，但不能包含复杂的JavaScript语句。

优先使用插值表达式场景举例

• 展示文本数据：当需要在页面上展示动态数据时，优先使用插值表达式。例如，展示用户的姓名：

<div>用户姓名：{{ user.name }}</div>

• 简单运算展示：比如展示商品的折扣后价格，假设原价price，折扣discount：

<div>折扣后价格：{{ price * (1 - discount) }}</div>

Vue指令特点

1. 用于DOM操作：指令是带有v-前缀的特殊属性，用于对DOM元素进行操作，例如控制元素的显示隐藏、绑定事件、循环渲染等。
2. 丰富的功能：每个指令都有特定的功能，能实现复杂的交互逻辑和DOM操作，而不仅仅局限于数据展示。

优先使用指令场景举例

• 控制元素显示隐藏：使用v-if或v-show指令。v-if根据表达式的真假来动态添加或移除DOM元素，v-show则是通过切换元素的display样式来控制显示隐藏。

<!-- v-if 根据条件决定是否渲染该元素 -->
<div v-if="isLoggedIn">欢迎，用户</div>
<!-- v-show 根据条件切换元素的display样式 -->
<div v-show="isVisible">这是一个可见性受控的元素</div>

• 绑定事件：使用v-on指令（可缩写为@）。例如，为按钮绑定点击事件：

<button @click="handleClick">点击我</button>

在methods中定义handleClick方法：

methods: {
  handleClick() {
    console.log('按钮被点击了');
  }
}

• 列表渲染：使用v-for指令，根据数组或对象来循环渲染元素。例如，渲染一个用户列表：

<ul>
  <li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>

这里users是一个数组，每个user对象包含id和name属性。:key用于提高列表渲染的效率。