1.setup函數：

1.概述：

• setup 是Vue3中一個新的配置項,他是一個函數，是組合式API的舞臺，組件中所用到的 數據 方法 計算屬性 監視屬性等都在setup函數中；
• setup 函數中 返回的對象中的內容，可以在模板中直接使用；
• setup 函數中的this 是undefined，因此在setup函數中不使用this；
• setup 函數 會beforeCreate之前調用，領先所有的鉤子執行的；

2.案例分析：

   在vue3開始學習的時候我們搭建了一個簡單的vue項目，但實際上我們是通過vue2語法來編寫的，也就是將數據放置在data屬性中，方法放置在methods屬性中這種分散的語法；在vue3中我們將這些數據，方法等全部放置在setup函數中；

<template><h2>名稱：{{ name }}</h2><h2 v-text="'地址：'+address"></h2><button @click="changeName">更新名稱</button>
</template><script>
export default {name: "School",setup() {console.log("setup函數執行了")//聲明(默認是 非響應式的) 變量  并 賦值let name = "猿究院";let address = "北大街";//不能使用this 是 undefined// console.log(this)// function changeName() {}const changeName = () => {console.log("更新name屬性:", name);name += "~";}return {//返回變量  可以在模板中直接使用name, address, changeName}},beforeCreate() {console.log("生命周期函數 beforeCreate")}
}</script><style scoped></style> 

<template>
<School></School>
</template><script>import School from "./School.vue"
export default {name: "App",components: {School}
}
</script><style scoped></style>

說明：在上述案例的school.vue組件中，我們將此組件的數據，及事件的回調函數全部寫到了setup函數中，并將數據和回調函數寫到了setup函數的return屬性中，注意，setup函數中的數據及方法必須在return中返回，才能在模板中直接使用；

通過測試結果發現，可以正常將數據渲染到頁面上，但同時也存在兩個問題：

• setup函數書寫過于繁瑣，在此函數中需要被渲染的數據必須在return中返回才可使用；
• setup函數中的方法默認是非響應式的，也就是說案例中的改變名稱函數雖然會實際修改屬性的值，但不會將修改后的值渲染到頁面上；

通過測試結果可以看出，name屬性的值確實被改變了，但卻并未渲染到頁面上；

2.setup函數的優化：（setup語法糖）

優化1：

<template><h2>名稱：{{ name }}</h2><h2 v-text="'地址：'+address"></h2><button @click="changeName">更新名稱</button>
</template><!-- script setup用于主要邏輯 -->
<script lang="ts" setup>const name = '猿究院';
const address = '北大街';// 定義函數
const changeName = () => {console.log("更新name屬性:", name.value);name.value += '~';
};
</script><!-- 普通script用于定義組件相關屬性等 -->
<script lang="ts">
export default {name: 'School'
};
</script><style scoped></style>  

通過上述setup語法糖優化后，需要渲染到頁面的數據不用再寫到return中返回后才可使用了；

此時仍可以在頁面上獲取到相應的值，但此時的值仍是非響應式的，而且優化后需要寫兩個script編寫，所以仍然需要進一步優化；

優化2：

可以安裝一個vite插件，就可以將兩個script標簽進行合并了

安裝插件：

安裝指令：只對當前項目安裝

npm i vite-plugin-vue-setup-extend -D 

配置vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//導入插件
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vite.dev/config/
export default defineConfig({plugins: [vue(),//使用插件vueSetupExtend()],
}) 

代碼編寫：

<template><h2>名稱：{{ name }}</h2><h2 v-text="'地址：'+address"></h2><button @click="changeName">更新名稱</button>
</template><!--setup  語法糖-->
<script lang="ts" setup name="School">let name = "猿究院";
let address = "北大街";
const changeName = () => {console.log("更新name屬性:", name);name += '~'
}
</script><style scoped></style> 

<template><School></School>
</template><script setup lang="ts" name="App">import School from "./components/School.vue";</script><style scoped></style>

上面優化案例中，我們合并了兩個script標簽，并且實現了數據的正常渲染；

但此時的數據仍然是非響應式的，修改數據，還是不會同步渲染到頁面上，因此還需要進行優化；