前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用

script setup 語法糖

組合式 API：setup()

基本使用

Vue 3 的 Composition API 系列里，推出了一個全新的 setup 函數(shù)，它是一個組件選項，在創(chuàng)建組件之前執(zhí)行，一旦 props 被解析，并作為組合式 API 的入口點。【學(xué)習(xí)視頻分享：vue視頻教程、web前端視頻】

setup 選項是一個接收 props 和 context 的函數(shù)，我們參考文檔進(jìn)行討論。此外，我們將 setup 返回的所有內(nèi)容都暴露給組件的其余部分 (計算屬性、方法、生命周期鉤子等等) 以及組件的模板。

<script> // 這是一個基于 TypeScript 的 Vue 組件 import { defineComponent } from 'vue'  export default defineComponent({   setup(props, context) {     // 在這里聲明數(shù)據(jù)，或者編寫函數(shù)并在這里執(zhí)行它      return {       // 需要給 `<template />` 用的數(shù)據(jù)或函數(shù)，在這里 `return` 出去     }   }, })  </script>

新的 setup 選項是在組件創(chuàng)建之前, props 被解析之后執(zhí)行，是組合式 API 的入口。

注意：
在 setup 中你應(yīng)該避免使用 this，因為它不會找到組件實例。setup 的調(diào)用發(fā)生在 data property、computed property 或 methods 被解析之前，所以它們無法>在 setup 中被獲取。

在添加了setup的script標(biāo)簽中，我們不必聲明和方法，這種寫法會自動將所有頂級變量、函數(shù)，均會自動暴露給模板（template）使用
這里強(qiáng)調(diào)一句 “暴露給模板，跟暴露給外部不是一回事”

TIP：說的通俗一點，就是在使用 Vue 3 生命周期的情況下，整個組件相關(guān)的業(yè)務(wù)代碼，都可以放在 setup 里執(zhí)行。

因為在 setup 之后，其他的生命周期才會被啟用，我們對比一下Vue2的Vue3生命周期的變化

組件生命周期

關(guān)于 Vue 生命周期的變化，可以從下表直觀地了解：

可以看到 Vue 2 生命周期里的 beforeCreate 和 created ，在 Vue 3 里已被 setup 替代。

script setup 語法糖

它是 Vue3 的一個新語法糖，在 setup 函數(shù)中。所有 ES 模塊導(dǎo)出都被認(rèn)為是暴露給上下文的值，并包含在 setup() 返回對象中。相對于之前的寫法，使用后，語法也變得更簡單。

自動注冊屬性和方法無需返回，直接使用

1.<script setup> 語法糖并不是新增的功能模塊，它只是簡化了以往的組合API（compositionApi）的必須返回（return）的寫法，并且有更好的運(yùn)行時性能。

2.在 setup 函數(shù)中：所有 ES 模塊導(dǎo)出都被認(rèn)為是暴露給上下文的值，并包含在 setup() 返回對象中。相對于之前的寫法，使用后，語法也變得更簡單。

你不必?fù)?dān)心setup語法糖的學(xué)習(xí)成本，他是組合式API的簡化，并沒有新增的知識點。你只需要了解一些用法和細(xì)微的不同之處，甚至比之前寫setup()還要順手！

使用方式也很簡單，只需要在 script 標(biāo)簽加上 setup 關(guān)鍵字即可

<script setup> </script>

組件核心 API 的使用

組件自動注冊

在 script setup 中，引入的組件可以直接使用，無需再通過components進(jìn)行注冊，并且無法指定當(dāng)前組件的名字，它會自動以文件名為主，也就是不用再寫name屬性了。

示例：

<template> 	<Child /> </template>  <script setup> import Child from '@/components/Child.vue' </script>

定義組件的 props

defineProps —-> [用來接收父組件傳來的 props] 代碼示列：

通過defineProps指定當(dāng)前 props 類型，獲得上下文的props對象。

示例：

<script setup>   import { defineProps } from 'vue'    const props = defineProps({     title: String,   }) </script> <!-- 或者 --> <script setup>      import { ref,defineProps } from 'vue';          type Props={          msg:string      }     defineProps<Props>();  </script>

定義 emit

defineEmit —-> [子組件向父組件事件傳遞]

使用defineEmit定義當(dāng)前組件含有的事件，并通過返回的上下文去執(zhí)行 emit。

代碼示列：

<script setup>   import { defineEmits } from 'vue'   const emit = defineEmits(['change', 'delete'])    </script>

父子組件通信

defineProps 用來接收父組件傳來的 props ; defineEmits 用來聲明觸發(fā)的事件。

//父組件 <template> 	<Child @getChild="getChild" :title="msg" /> </template>  <script setup> import { ref } from 'vue' import Child from '@/components/Child.vue' const msg = ref('parent value') const getChild = (e) => { 	// 接收父組件傳遞過來的數(shù)據(jù) 	console.log(e); // child value } </script>

//子組件 <template> 	<div @click="toEmits">Child Components</div> </template>  <script setup> // defineEmits,defineProps無需導(dǎo)入，直接使用 const emits = defineEmits(['getChild']); const props = defineProps({ 	title: { 		type: String, 		defaule: 'defaule title' 	} });  const toEmits = () => { 	emits('getChild', 'child value') // 向父組件傳遞數(shù)據(jù) }  // 獲取父組件傳遞過來的數(shù)據(jù) console.log(props.title); // parent value </script>

子組件通過 defineProps 接收父組件傳過來的數(shù)據(jù)，子組件通過 defineEmits 定義事件發(fā)送信息給父組件

useSlots() 和 useAttrs()

獲取 slots 和 attrs

注：useContext API 被棄用，取而代之的是更加細(xì)分的 api。

可以通過useContext從上下文中獲取 slots 和 attrs。不過提案在正式通過后，廢除了這個語法，被拆分成了useAttrs和useSlots。

• useAttrs：見名知意，這是用來獲取 attrs 數(shù)據(jù)，但是這和 vue2 不同，里面包含了 class、屬性、方法。

<template>     <component v-bind='attrs'></component> </template> <srcipt setup>    const attrs = useAttrs(); <script>

• useSlots: 顧名思義，獲取插槽數(shù)據(jù)。

使用示例：

// 舊 <script setup>   import { useContext } from 'vue'    const { slots, attrs } = useContext() </script>  // 新 <script setup>   import { useAttrs, useSlots } from 'vue'    const attrs = useAttrs()   const slots = useSlots() </script>

defineExpose API

defineExpose —-> [組件暴露出自己的屬性]

傳統(tǒng)的寫法，我們可以在父組件中，通過 ref 實例的方式去訪問子組件的內(nèi)容，但在 script setup 中，該方法就不能用了，setup 相當(dāng)于是一個閉包，除了內(nèi)部的 template模板，誰都不能訪問內(nèi)部的數(shù)據(jù)和方法。

<script setup> 的組件默認(rèn)不會對外部暴露任何內(nèi)部聲明的屬性。
如果有部分屬性要暴露出去，可以使用 defineExpose

注意：目前發(fā)現(xiàn)defineExpose暴露出去的屬性以及方法都是 unknown 類型，如果有修正類型的方法，歡迎評論區(qū)補(bǔ)充。

如果需要對外暴露 setup 中的數(shù)據(jù)和方法，需要使用 defineExpose API。示例：

//子組件  <template> 	{{msg}} </template>  <script setup> import { ref } from 'vue'  let msg = ref("Child Components"); let num = ref(123);  // defineExpose無需導(dǎo)入，直接使用 defineExpose({ 	msg, 	num }); </script>

//父組件 <template> 	<Child ref="child" /> </template>  <script setup> import { ref, onMounted } from 'vue' import Child from '@/components/Child.vue'  let child = ref(null);  onMounted(() => { 	console.log(child.value.msg); // Child Components 	console.log(child.value.num); // 123 }) </script>

定義響應(yīng)變量、函數(shù)、監(jiān)聽、計算屬性computed

<script setup >  import { ref,computed,watchEffect } from 'vue';  const count = ref(0); //不用 return ，直接在 templete 中使用  const addCount=()=>{ //定義函數(shù)，使用同上      count.value++;  }   //創(chuàng)建一個只讀的計算屬性 ref： const plusOne = computed(() => count.value + 1)  // 創(chuàng)建一個可寫的計算屬性 ref const plusOne = computed({ get: () => count.value + 1,  set: (val) => { count.value = val - 1 }  })   //定義監(jiān)聽，使用同上 //...some code else  watchEffect(()=>console.log(count.value));  </script>

watchEffect和watch區(qū)別

1、watch是惰性執(zhí)行，也就是只有監(jiān)聽的值發(fā)生變化的時候才會執(zhí)行，但是watchEffect不同，每次代碼加載watchEffect都會執(zhí)行（忽略watch第三個參數(shù)的配置，如果修改配置項也可以實現(xiàn)立即執(zhí)行）

2、watch需要傳遞監(jiān)聽的對象，watchEffect不需要

3、watch只能監(jiān)聽響應(yīng)式數(shù)據(jù)：ref定義的屬性和reactive定義的對象，如果直接監(jiān)聽reactive定義對象中的屬性是不允許的，除非使用函數(shù)轉(zhuǎn)換一下

4、watchEffect如果監(jiān)聽reactive定義的對象是不起作用的，只能監(jiān)聽對象中的屬性。

reactive

返回一個對象的響應(yīng)式代理。

<script setup> import { reactive, onUnmounted } from 'vue'  const state = reactive({     counter: 0 }) // 定時器 每秒都會更新數(shù)據(jù) const timer = setInterval(() => {     state.counter++ }, 1000);  onUnmounted(() => {     clearInterval(timer); }) </script> <template>     <div>{{state.counter}}</div> </template>

使用ref也能達(dá)到我們預(yù)期的'counter',并且在模板中,vue進(jìn)行了處理，我們可以直接使用counter而不用寫counter.value.

ref和reactive的關(guān)系:

ref是一個{value:'xxxx'}的結(jié)構(gòu)，value是一個reactive對象

ref 暴露變量到模板

曾經(jīng)的提案中，如果需要暴露變量到模板，需要在變量前加入export聲明：

export const count = ref(0)

不過在新版的提案中，無需export聲明，編譯器會自動尋找模板中使用的變量，只需像下面這樣簡單的聲明，即可在模板中使用該變量

<script setup > import { ref } from 'vue'  const counter = ref(0);//不用 return ，直接在 templete 中使用  const timer = setInterval(() => {     counter.value++ }, 1000)  onUnmounted(() => {     clearInterval(timer); }) </script> <template>     <div>{{counter}}</div> </template>

其他 Hook Api

• useCSSModule：CSS Modules 是一種 CSS 的模塊化和組合系統(tǒng)。vue-loader 集成 CSS Modules，可以作為模擬 scoped CSS。允許在單個文件組件的setup中訪問CSS模塊。此 api 本人用的比較少，不過多做介紹。

• useCssVars: 此 api 暫時資料比較少。介紹v-bind in styles時提到過。

• useTransitionState: 此 api 暫時資料比較少。

• useSSRContext: 此 api 暫時資料比較少。

支持 async await 異步

注意在vue3的源代碼中，setup執(zhí)行完畢，函數(shù) getCurrentInstance 內(nèi)部的有個值會釋放對 currentInstance 的引用，await 語句會導(dǎo)致后續(xù)代碼進(jìn)入異步執(zhí)行的情況。所以上述例子中最后一個 getCurrentInstance() 會返回 null，建議使用變量保存第一個 getCurrentInstance() 返回的引用.

<script setup>   const post = await fetch(`/api/post/1`).then((r) => r.json()) </script>

<script setup> 中可以使用頂層 await。結(jié)果代碼會被編譯成 async setup()：

<script setup> const post = await fetch(`/api/post/1`).then(r => r.json()) </script>

另外，await 的表達(dá)式會自動編譯成在 await 之后保留當(dāng)前組件實例上下文的格式。

注意
async setup() 必須與 Suspense 組合使用，Suspense 目前還是處于實驗階段的特性。我們打算在將來的某個發(fā)布版本中開發(fā)完成并提供文檔 – 如果你現(xiàn)在感興趣，可以參照 tests 看它是如何工作的。

定義組件其他配置

配置項的缺失，有時候我們需要更改組件選項，在setup中我們目前是無法做到的。我們需要在上方再引入一個 script，在上方寫入對應(yīng)的 export即可，需要單開一個 script。

<script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有這些需要的情況下或許會被使用到：

• 無法在 <script setup> 聲明的選項，例如 inheritAttrs 或通過插件啟用的自定義的選項。
• 聲明命名導(dǎo)出。
• 運(yùn)行副作用或者創(chuàng)建只需要執(zhí)行一次的對象。

在script setup 外使用export default，其內(nèi)容會被處理后放入原組件聲明字段。

<script> // 普通 `<script>`, 在模塊范圍下執(zhí)行(只執(zhí)行一次) runSideEffectOnce()  // 聲明額外的選項   export default {     name: "MyComponent",     inheritAttrs: false,     customOptions: {}   } </script> <script setup>     import HelloWorld from '../components/HelloWorld.vue'     // 在 setup() 作用域中執(zhí)行 (對每個實例皆如此)     // your code </script> <template>   <div>     <HelloWorld msg="Vue3 + TypeScript + Vite"/>   </div> </template>

注意：Vue 3 SFC 一般會自動從組件的文件名推斷出組件的 name。在大多數(shù)情況下，不需要明確的 name 聲明。唯一需要的情況是當(dāng)你需要 <keep-alive> 包含或排除或直接檢查組件的選項時，你需要這個名字。

（學(xué)習(xí)視頻分享：web前端開發(fā)、編程基礎(chǔ)視頻）