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