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

其它篇章：
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糖简化代码

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。

优点

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

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语法糖的方式实现，该如何操作呢？
• 接下来看步骤二。

步骤二：数据的写法

1. 将前面代码里的setup删掉，在script标签外再新写一个标签，如下：

   <script setup>
   //后面在这写内容
   </script>
   

2. 在<script setup>里添加数据：

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

   这些内容相当于之前的：

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

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

步骤三：添加name

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

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

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

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

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

  2. 在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))
         },
       },
     })
     

  3. 添加依赖后，<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糖简化代码