在Vue3中如何使用＜script setup＞语法

Vue 3 带来了许多令人激动的新特性，其中之一便是 <script setup> 语法。这个新的语法增强了代码的简洁性和可读性，使得开发者在编写 Vue 组件时更加高效。本文将详细介绍如何在 Vue 3 中使用 <script setup> 语法，并通过示例代码进行演示。

什么是 <script setup>？

<script setup> 是 Vue 3 中一种新的组件声明方式，它允许我们在 <script> 标签内直接书写与组件逻辑相关的代码，而无需手动导出 setup 函数。其主要目的是简化单文件组件（SFC）的书写方式，改进 TypeScript 支持，并且提升代码的可维护性。

优点

• 简洁：免去了 export default 和 setup 函数的结构，代码更加简洁。
• 更好的 TypeScript 支持：直接互用 TS 类型声明。
• 性能优化：官方宣称会有微小的性能优势。

示例代码

在我们深入了解之前，先通过一个简单的示例代码来感受一下 <script setup> 如何在 Vue 3 中使用。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

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

const message = ref('Hello, Vue 3!')
const toggleMessage = () => {
  message.value = message.value === 'Hello, Vue 3!' ? 'Goodbye, Vue 3!' : 'Hello, Vue 3!';
}
</script>

<style scoped>
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #369570;
}
</style>

以上示例展示了一个简单的 Vue 组件，其中包含一个可切换的 message 状态。在传统的 Vue 组件中，我们可能需要引入 setup 函数并导出一个包含该函数的对象。而在 <script setup> 中，我们可以直接编写逻辑代码，无需再写外层的 setup 函数。

详细解析

1. 模板定义

   <template>
     <div>
       <h1>{{ message }}</h1>
       <button @click="toggleMessage">Toggle Message</button>
     </div>
   </template>
   

   模板部分与传统的 Vue 组件并没有区别，可以直接使用数据 message 和方法 toggleMessage。

2. 状态声明与方法

   <script setup>
   import { ref } from 'vue'
   
   const message = ref('Hello, Vue 3!')
   const toggleMessage = () => {
     message.value = message.value === 'Hello, Vue 3!' ? 'Goodbye, Vue 3!' : 'Hello, Vue 3!';
   }
   </script>
   

   这里直接在 <script setup> 中使用了 ref 和定义了一个方法 toggleMessage。相比传统的 setup 函数，这里省略了函数和返回值的嵌套，显得更加简洁直观。

3. 样式

   <style scoped>
   button {
     padding: 10px 20px;
     background-color: #42b983;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
   }
   button:hover {
     background-color: #369570;
   }
   </style>
   

   样式部分也未做改动，继续使用 scoped 表明样式只对当前组件生效。

深入使用 <script setup>

接下来我们将介绍一些更复杂的用法，揭示 <script setup> 的更多优势和实际应用。

数组与对象

直接使用数组或对象，可以采用解构赋值的方式。

<template>
  <div>
    <p>{{ user.name }}: {{ user.age }}</p>
    <button @click="incrementAge">Increase Age</button>
  </div>
</template>

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

const user = reactive({
  name: 'Alice',
  age: 25
})

const incrementAge = () => {
  user.age++;
}
</script>

这里我们使用了 reactive 函数来创建一个响应式对象 user 并定义了操作该对象的函数 incrementAge。这种直接声明响应式对象和函数的方式使代码结构更加清晰。

使用 Composition API

在 <script setup> 中，我们可以直接使用 Vue 3 的 Composition API，显得更加简便。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const count = ref(0)
const increment = () => {
  count.value++
}
const doubleCount = computed(() => count.value * 2)
</script>

生命周期钩子

在 <script setup> 中也可以使用生命周期钩子，如 onMounted 和 onUnmounted。

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const message = ref('')

onMounted(() => {
  message.value = 'Component Mounted!';
  console.log('Component has been mounted.');
})

onUnmounted(() => {
  console.log('Component will be unmounted.');
})
</script>

结论

通过以上的示例和解析，我们可以看到 <script setup> 提供了一种编写 Vue 组件的全新、更简洁的方式。它不仅能提升开发效率，还能使代码更易于维护。如果你还没有尝试过 <script setup>, 强烈建议在新的项目中尝试使用这个特性

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作