当前位置：首页 > article >正文

Vue 3 中使用 `＜script setup＞` 语法糖实现模板插值表达式

article 2024/11/27 5:24:21

Vue 3 中使用 `<script setup>` 语法糖实现模板插值表达式

Vue 3 中的 <script setup> 语法糖让我们可以更直接地定义响应式数据和计算属性，从而在模板中使用插值表达式更加简洁。这种写法不需要手动 return 数据和方法，代码更加清晰。本文将详细介绍如何通过 <script setup> 语法糖实现插值表达式的各种用法。

一、什么是 `<script setup>`

<script setup> 是 Vue 3 中一种新的 <script> 标签形式，用来更简洁地编写组件的逻辑。通过 <script setup>，Vue 可以自动解析并暴露我们定义的变量、方法、计算属性等，使它们可以直接在模板中使用。

优势：

更少的模板代码：无需手动 return 数据和方法。
更清晰的逻辑：将数据和操作集中在一起，避免重复。
编译性能提升：Vue 在编译时会优化 <script setup> 的代码，使渲染更加高效。

二、插值表达式的基本用法

1. 文本插值

插值表达式最基本的用法是展示文本信息。在 <script setup> 中使用 ref 定义响应式数据，然后在模板中使用 {{ }} 包裹变量即可展示文本。

示例：

<template>
  <p>{{ message }}</p>
</template>

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

const message = ref("Hello Vue 3 with script setup!");
</script>

在这里，我们使用 ref 创建了一个响应式变量 message，然后通过 {{ message }} 在模板中展示其值。如果 message 的值发生变化，Vue 会自动更新页面显示的内容。

2. JavaScript 表达式插值

插值表达式支持在 {{ }} 中直接使用 JavaScript 表达式，包括计算、三元运算符、字符串拼接等。

示例：

<template>
  <p>{{ userName + "，欢迎回来！" }}</p>
  <p>年龄：{{ age > 18 ? "成年" : "未成年" }}</p>
</template>

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

const userName = ref("小明");
const age = ref(20);
</script>

在这个例子中，我们在 {{ }} 中直接使用了字符串拼接和三元运算符，使页面根据 userName 和 age 的值动态展示欢迎语句和年龄状态。

三、属性绑定（属性插值）

除了文本内容，插值表达式还可以用于 HTML 属性的动态绑定。通过 : 语法（或 v-bind），我们可以将数据绑定到 HTML 元素的属性上。

示例：

<template>
  <img :src="imageUrl" alt="动态图片" />
  <a :href="websiteUrl">访问我的网站</a>
</template>

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

const imageUrl = ref("https://example.com/image.jpg");
const websiteUrl = ref("https://example.com");
</script>

在这个示例中，:src="imageUrl" 会将 imageUrl 的值绑定到 <img> 元素的 src 属性。数据改变时，页面的图片也会自动更新。

组合绑定示例

在属性绑定中，我们还可以使用复杂的表达式来动态决定属性值，例如使用三元运算符来动态设置 CSS 类：

<template>
  <button :class="isActive ? 'btn-active' : 'btn-inactive'">点击我</button>
</template>

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

const isActive = ref(false);
</script>

当 isActive 为 true 时，按钮的类名为 btn-active，否则为 btn-inactive。通过控制 isActive 的值，可以动态地改变按钮的样式。

四、计算属性与插值表达式

在 <script setup> 中，我们可以通过 computed 定义计算属性。计算属性会自动根据依赖的数据变化而重新计算，非常适合复杂的插值表达式需求。

示例：

<template>
  <p>欢迎，{{ fullName }}</p>
</template>

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

const firstName = ref("张");
const lastName = ref("三");
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

在这里，fullName 是一个计算属性，依赖于 firstName 和 lastName 的值。如果其中一个值发生变化，fullName 会自动更新并在视图中反映出来。

五、双向绑定与插值结合

Vue 3 支持通过 v-model 指令实现数据的双向绑定，常用于输入框和其他表单控件。我们可以结合插值表达式实现双向绑定的动态显示。

示例：

<template>
  <input v-model="userInput" placeholder="请输入您的姓名" />
  <p>您输入的是：{{ userInput }}</p>
</template>

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

const userInput = ref("");
</script>

在这个例子中，v-model="userInput" 实现了双向绑定。当用户在输入框中输入文字时，userInput 的值会实时更新，模板中的插值表达式 {{ userInput }} 也会相应变化。

六、方法定义和插值调用

在 <script setup> 中定义方法时，直接在模板中调用方法来展示动态数据或执行某些逻辑。

示例：

<template>
  <p>当前时间：{{ getCurrentTime() }}</p>
  <button @click="updateTime">刷新时间</button>
</template>

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

const currentTime = ref(new Date().toLocaleTimeString());

function getCurrentTime() {
  return currentTime.value;
}

function updateTime() {
  currentTime.value = new Date().toLocaleTimeString();
}
</script>

在这个示例中，getCurrentTime() 函数返回当前时间字符串，而 updateTime() 则会在按钮点击时更新 currentTime，从而刷新页面显示的时间。

七、注意事项

避免复杂逻辑：在插值表达式中不要放置过于复杂的逻辑。如果需要，可以定义计算属性或方法来处理。
合理使用 ref 和 computed：使用 ref 来管理简单数据，使用 computed 处理依赖关系的值，使代码更加模块化。
在 <script setup> 中避免 return：<script setup> 会自动暴露定义的变量到模板中，无需手动 return。
保持模板简洁：尽量避免在模板中写复杂的 JavaScript 表达式，可以在 <script setup> 中将复杂逻辑提取到计算属性或方法中。