Vue3中的script setup語法糖怎么使用

這篇文章主要介紹了Vue3中的script setup語法糖怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue3中的script setup語法糖怎么使用文章都會有所收獲，下面我們一起來看看吧。

script setup 語法糖

組合式 API：setup()

基本使用

Vue 3 的 Composition API 系列里，推出了一個全新的 setup 函數，它是一個組件選項，在創建組件之前執行，一旦 props 被解析，并作為組合式 API 的入口點。

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

<script>
// 這是一個基于 TypeScript 的 Vue 組件
import { defineComponent } from 'vue'

export default defineComponent({
  setup(props, context) {
    // 在這里聲明數據，或者編寫函數并在這里執行它

    return {
      // 需要給 `<template />` 用的數據或函數，在這里 `return` 出去
    }
  },
})

</script>

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


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

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

TIP：說的通俗一點，就是在使用 Vue 3 生命周期的情況下，整個組件相關的業務代碼，都可以放在 setup 里執行。

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

組件生命周期

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

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

script setup 語法糖

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

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

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

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

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

使用方式也很簡單，只需要在 script 標簽加上 setup 關鍵字即可

<script setup>
</script>

組件核心 API 的使用

組件自動注冊

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

示例：

<template>
	<Child />
</template>

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

定義組件的 props

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

通過defineProps指定當前 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定義當前組件含有的事件，并通過返回的上下文去執行 emit。

代碼示列：

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

父子組件通信

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

//父組件
<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) => {
	// 接收父組件傳遞過來的數據
	console.log(e); // child value
}
</script>

//子組件
<template>
	<div @click="toEmits">Child Components</div>
</template>

<script setup>
// defineEmits,defineProps無需導入，直接使用
const emits = defineEmits(['getChild']);
const props = defineProps({
	title: {
		type: String,
		defaule: 'defaule title'
	}
});

const toEmits = () => {
	emits('getChild', 'child value') // 向父組件傳遞數據
}

// 獲取父組件傳遞過來的數據
console.log(props.title); // parent value
</script>

子組件通過 defineProps 接收父組件傳過來的數據，子組件通過 defineEmits 定義事件發送信息給父組件


useSlots() 和 useAttrs()

獲取 slots 和 attrs

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

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

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

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

• useSlots: 顧名思義，獲取插槽數據。

使用示例：

// 舊
<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 ----> [組件暴露出自己的屬性]

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

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

注意：目前發現defineExpose暴露出去的屬性以及方法都是 unknown 類型，如果有修正類型的方法，歡迎評論區補充。

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

//子組件

<template>
	{{msg}}
</template>

<script setup>
import { ref } from 'vue'

let msg = ref("Child Components");
let num = ref(123);

// defineExpose無需導入，直接使用
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>

定義響應變量、函數、監聽、計算屬性computed

<script setup > 
import { ref,computed,watchEffect } from 'vue';

const count = ref(0); //不用 return ，直接在 templete 中使用

const addCount=()=>{ //定義函數，使用同上 
    count.value++; 
} 

//創建一個只讀的計算屬性 ref：
const plusOne = computed(() => count.value + 1)

// 創建一個可寫的計算屬性 ref
const plusOne = computed({
get: () => count.value + 1, 
set: (val) => { count.value = val - 1 } 
})


//定義監聽，使用同上 //...some code else 
watchEffect(()=>console.log(count.value)); 
</script>

watchEffect和watch區別

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

2、watch需要傳遞監聽的對象，watchEffect不需要

3、watch只能監聽響應式數據：ref定義的屬性和reactive定義的對象，如果直接監聽reactive定義對象中的屬性是不允許的，除非使用函數轉換一下

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

reactive

返回一個對象的響應式代理。

<script setup>
import { reactive, onUnmounted } from 'vue'

const state = reactive({
    counter: 0
})
// 定時器 每秒都會更新數據
const timer = setInterval(() => {
    state.counter++
}, 1000);

onUnmounted(() => {
    clearInterval(timer);
})
</script>
<template>
    <div>{{state.counter}}</div>
</template>

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


ref和reactive的關系:

ref是一個{value:'xxxx'}的結構，value是一個reactive對象

ref 暴露變量到模板

曾經的提案中，如果需要暴露變量到模板，需要在變量前加入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 的模塊化和組合系統。vue-loader 集成 CSS Modules，可以作為模擬 scoped CSS。允許在單個文件組件的setup中訪問CSS模塊。此 api 本人用的比較少，不過多做介紹。

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

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

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

支持 async await 異步

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

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

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

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

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


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

定義組件其他配置

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

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

• 無法在 <script setup> 聲明的選項，例如 inheritAttrs 或通過插件啟用的自定義的選項。

• 聲明命名導出。

• 運行副作用或者創建只需要執行一次的對象。

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

<script>
// 普通 `<script>`, 在模塊范圍下執行(只執行一次)
runSideEffectOnce()

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

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

關于“Vue3中的script setup語法糖怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue3中的script setup語法糖怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。