其它篇章：
1.【Vue3】01-创建Vue3工程
2.【Vue3】02-Vue3工程目录分析
3.【Vue3】03-编写app组件——src
4.【Vue3】04-编写vue实现一个简单效果
5.【Vue3】05-Options API和Composition API的区别
6.【Vue3】06-利用setup编写vue（1）
7.【Vue3】07-利用setup编写vue（2）-setup的语法糖
合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目
2.【Vue3】编写vue实现一个简单效果，并使用setup糖简化代码

【Vue3】07-利用setup编写vue（2）-setup的语法糖

- setup
- - setup的语法糖
  - - 1. 理解概念
    - - 概念
      - 分析
      - 优点
    - 2. 实操验证
    - - 步骤一：环境准备
      - 步骤二：数据的写法
      - 步骤三：添加name
      - 步骤四：添加依赖（可选）
      - 步骤五：验证

setup

setup的语法糖

1. 理解概念

概念

Vue3 引入了新的 setup 语法糖，使得组件的编写更加简洁和高效。
setup 函数是 Vue3 中的一个新特性，用于替代 Vue2 中的 data、computed、watch 等选项，是一种新的组件选项。

分析

以下是直接写setup函数的方法，写在export里：

<script lang="ts">export default{name:"person",setup(){let name = 'zhangsan';let age = 20;let birth = '2025.1.1';function show(){alert(birth)}return {name,age,show}}}
</script>

思考：看看这里面想写的东西有哪些？
- 数据：name、age、birth
- 方法：show()
思考：再看看，有哪些东西是为了格式正确而不得不写的？
- 格式：要声明这是setup(){}
- 返回：return
思考：怎样可以使代码更加简洁，更加易读？
- 使用setup语法糖，<script setup></script>，新写个标签，分离出来，不用return。

优点

简化 代码结构。
更好的组件封装。
引入 响应式 功能。
更好的 类型推断。
性能优化。

2. 实操验证

步骤一：环境准备

以以下代码为例，这是通过在export里写setup函数来实现功能的：

<template><div class="person"><h1>姓名：{{name}}</h1></div>
</template><script lang="ts">export default{name:"person",setup(){let name = 'zhangsan';return {name}}}
</script>
<style>.person {background-color: rgb(255, 140, 0);box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

思考：按照之前的方法，在export里写setup函数，是以这样的方法实现的。而要按照setup语法糖的方式实现，该如何操作呢？
接下来看步骤二。

步骤二：数据的写法

将前面代码里的setup删掉，在script标签外再新写一个标签，如下：
```
<script setup>
//后面在这写内容
</script>
```

在<script setup>里添加数据：

<script setup>let name = 'zhangsan';
</script>

这些内容相当于之前的：

setup(){let name = 'zhangsan'return {name}
}

可以发现，不用写return了，不用添加一个功能或数据就要去return里再加了。

步骤三：添加name

前面的<script lang="ts">标签可以删掉了，在<script setup>后面加name，即：

<script setup name="person">let name = 'zhangsan'
</script>

步骤四：添加依赖（可选）

思考：前面添加name的操作，浏览器里查看的组件名称是vue的文件名，如果想要name和文件名不一样，该怎么做？

添加一个依赖：

在终端输入npm i vite-plugin-vue-setup-extend -D。

在vite.config.ts添加依赖，import ViteSetupExtend from 'vite-plugin-vue-devtools'（其中ViteSetupExtend可自定义），在plugins中添加ViteSetupExtend()，的内容如下：

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import ViteSetupExtend from 'vite-plugin-vue-devtools' //在这添加// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),ViteSetupExtend(), //在这添加],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})

添加依赖后，<script setup name="person">中name的内容，就可以在浏览器中查看组件时看到了。

步骤五：验证

终端输入npm run dev启动服务器，浏览器访问，得到以下界面：
在这里插入图片描述

其它篇章：
1.【Vue3】01-创建Vue3工程
2.【Vue3】02-Vue3工程目录分析
3.【Vue3】03-编写app组件——src
4.【Vue3】04-编写vue实现一个简单效果
5.【Vue3】05-Options API和Composition API的区别
6.【Vue3】06-利用setup编写vue（1）
7.【Vue3】07-利用setup编写vue（2）-setup的语法糖
合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目
2.【Vue3】编写vue实现一个简单效果，并使用setup糖简化代码