其它篇章：
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概述

理解概念

概念：

• 在Vue3中，setup函數是一個全新的選項，用于替代Vue2中的beforeCreate和created鉤子函數。
• 它是在 組件創建 時執行的一個函數，主要用于 聲明 組件的狀態和行為，使得組件更加清晰和易于維護。

優點：

在vue3中，相對vue2有一個優點，它可以在直接連寫幾個<Person/>(引入vue組件，這里用Person舉例)。
舉例：代碼如下。

<template><Person/><Person/><Person/><Person/><Person/>
</template>

驗證：最終效果如下，可以看到有很多組件，vue2就不能這樣寫。

實操驗證：基本用法

原始代碼：

<template><div class="person"><h1>姓名：{{name}}</h1><h1>年齡：{{age}}</h1><button @click="show">查看生日</button></div>
</template><script lang="ts">export default{name:"person",data() {return{name:'zhangsan',age:20,birth:'2005.1.1'}            },methods:{show(){alert(this.birth)}}}
</script><style>.person {background-color: rgb(200, 255, 0);box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

• 在此基礎上完成對setup的實操。

步驟一：創建setup，刪除data()、methods

對script標簽內容進行修改，在<script>的export中添加setup(){}，代碼如下：

<script lang="ts">export default{name:"person",setup(){//之后在這添加內容}}
</script>

步驟二：添加數據

1. 在setup()里添加數據，代替之前的data()（vue2寫法）的內容，代碼如下：

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

注意：這里添加的name、age、birth的數據都不是響應式的，在后面添加函數時，修改后的數據，是不會覆蓋開始就顯示的數據的。

2. 修改過后，發現前面對數據的引用飄紅了：
   
   這是因為沒有加return，在setup中添加return {n:name,a:age}，再將{{ }}的內容分別改為n,a就行了：
   

3. return中的內容，冒號左邊對應引用，冒號對應setup內的定義，但我們一般把這兩部分設置為一樣的，比如：{name:name,age:age}，這樣更容易分辨。而兩部分一樣的話，就可以簡寫為這樣的形式：{name,age}。
   添加數據后，最終的代碼如下：

   <template><div class="person"><h1>姓名：{{name}}</h1><h1>年齡：{{age}}</h1></div>
   </template><script lang="ts">export default{name:"person",setup(){let name = 'zhangsan';let age = 20;let birth = '2025.1.1';return {name,age}}}
   </script>
   

步驟三：添加方法

接下來在setup里添加方法。

注意：

1. 記住要添加在return之前，不然到return就結束了，后面的方法就沒用了。
2. 不要在setup里用this，this在setup函數里是undefined。要修改變量比如name，直接name='???'就可以了。

1. 定義一個函數，代碼如下：

   function show(){//之后在這添加內容
   }
   

2. 在函數中添加內容，完成指定功能，并將其添加到return中，代碼如下：

   function show(){alert(birth)
   }
   return {name,age,show}
   

3. 在<template>里的容器里添加按鈕，最終完整代碼如下：

<template><div class="person"><h1>姓名：{{name}}</h1><h1>年齡：{{age}}</h1><button @click="show">查看生日</button></div>
</template><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>
<style>.person {background-color: rgb(200, 255, 0);box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

步驟四：驗證

終端輸入npm run dev啟動服務器，瀏覽器訪問，并點擊“查看生日”，的到以下界面：

完整代碼：

App.vue:

<template><Person/><Person/><Person/><Person/><Person/>
</template><script lang="ts">import Person from './components/Person.vue';export default{name:"app",components:{Person}}
</script>
<style>.app {background-color: aqua;box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

Person.vue：

<template><div class="person"><h1>姓名：{{name}}</h1><h1>年齡：{{age}}</h1><button @click="show">查看生日</button></div>
</template><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>
<style>.person {background-color: rgb(200, 255, 0);box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

vue工程的基本創建與運行方法可參考以下篇章：

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