Vue 3 中的 <script setup> 语法糖

语法糖的功能就是让代码变的简洁

在 Vue 3 中，<script setup> 是一个非常有用的语法糖，它可以让代码变得更加简洁和优雅。接下来，我们将详细学习如何使用 <script setup>，并理解其背后的原理。

一、<script setup> 的基本使用

（一）定义 <script setup>

<script setup> 是 Vue 3.0 引入的一个新特性，它允许你在 <script> 标签中使用 setup 属性。这样，你就可以直接在 <script> 标签中编写 setup 函数中的内容，而不需要显式地定义 setup 函数和返回值。<script> 标签默认是js语言，所以后面到定义<script setup lang="ts">，表示使用的ts语言

<script setup>
  let a =666
</script>

这段代码就相当于

setup(){
  let a =666
  return {a}
}

（二）示例代码

将 Person.vue 组件改写为使用 <script setup> 的形式：

HTML复制

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>地址：{{ address }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showPhone">查看联系方式</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const name = ref('张三');
const age = ref(18);
const address = ref('贵州贵阳花果园');
const phone = ref('13812341234');

const changeName = () => {
  name.value = '张杠三';
};

const changeAge = () => {
  age.value += 1;
};

const showPhone = () => {
  alert(phone.value);
};
</script>

<style>
.person {
  background-color: #00f;
  color: #fff;
  padding: 20px;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
  margin: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

（三）解释

1. 定义响应式数据：使用 ref 函数定义响应式数据。ref 函数返回一个响应式引用对象，通过 .value 访问和修改其值。

2. 定义方法：直接定义函数作为方法。

3. 自动返回：<script setup> 会自动将定义的响应式数据和方法返回到模板中使用，无需显式返回。

二、<script setup> 的优势

（一）简洁

• 无需 setup 函数：直接在 <script> 标签中编写代码，无需定义 setup 函数。

• 无需 return：定义的响应式数据和方法会自动返回到模板中使用，无需显式返回。

（二）示例代码

HTML复制

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>地址：{{ address }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showPhone">查看联系方式</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const name = ref('张三');
const age = ref(18);
const address = ref('北京昌平区宏福苑鸿福科技园');
const phone = ref('13812341234');

const changeName = () => {
  name.value = '张杠三';
};

const changeAge = () => {
  age.value += 1;
};

const showPhone = () => {
  alert(phone.value);
};
</script>

<style>
.person {
  background-color: #00f;
  color: #fff;
  padding: 20px;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
  margin: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

（三）解释

1. 定义响应式数据：使用 ref 函数定义响应式数据。

2. 定义方法：直接定义函数作为方法。

3. 自动返回：<script setup> 会自动将定义的响应式数据和方法返回到模板中使用。

三、组件名称的配置

（一）组件名称

在使用 <script setup> 时，组件的名称可以通过 name 属性或文件名来配置。如果需要自定义组件名称，可以使用 name 属性，但是要需要插件的支持，所以还要安装插件。

（二）示例代码

HTML复制

<template>
  <div class="person">

  </div>
</template>

<script setup lang="ts" name="Person234">
</script>

<style>

</style>

四、安装插件支持

（一）安装插件

为了支持 <script setup> 中的 name 属性，需要安装一个插件 vite-plugin-vue-setup-extend。

（二）安装命令

bash复制

npm install vite-plugin-vue-setup-extend --save-dev

（三）配置 vite.config.js

在 vite.config.js 中引入并配置插件：

JavaScript复制

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteSetupExtend from 'vite-plugin-vue-setup-extend';

export default defineConfig({
  plugins: [vue(), viteSetupExtend()]
});

（四）解释

1. 安装插件：安装 vite-plugin-vue-setup-extend 插件。

2. 配置插件：在 vite.config.js 中引入并配置插件，以支持 <script setup> 中的 name 属性。

五、总结

（一）<script setup> 的优势

• 简洁：无需定义 setup 函数和返回值。

• 自动返回：定义的响应式数据和方法会自动返回到模板中使用。

（二）组件名称的配置

• 文件名：默认使用文件名作为组件名称。

• name 属性：通过 name 属性自定义组件名称。

（三）插件支持

• 安装插件：安装 vite-plugin-vue-setup-extend 插件。

• 配置插件：在 vite.config.js 中引入并配置插件，以支持 <script setup> 中的 name 属性。

相信你已经理解和使用 Vue 3 中的 <script setup> 语法糖了。在实际开发中，使用 <script setup> 可以让代码更加简洁和优雅，提高开发效率。