[[440450]]

剛開始使用 script setup 語法糖的時候，編輯器會提示這是一個實驗屬性，要使用的話，需要固定 vue 版本。

在 6 月底，該提案被正式定稿，在 v3.1.3 的版本上，繼續使用但仍會有實驗性提案的提示，在 V3.2 中，才會去除提示并移除一些廢棄的 API。

script setup 是啥?

script setup 是 vue3 的新語法糖，并不是新增的功能模塊，只是簡化了以往的組合式 API 必須返回(return)的寫法，并且有更好的運行時性能。

寫法簡便：

<script setup> 
... 
</script> 

使用 script setup 語法糖時，內部的屬性或方法可以直接使用，無需 return 返回;引入子組件可以自動注冊，無需 components 注冊可直接使用等等，接下來介紹 script setup 語法糖具體使用以及與 setup() 函數的區別。

1、屬性和方法無需返回，可直接使用

setup() 來寫組合式 API 時，內部定義的屬性和方法，必須使用 return 暴露到上下文，外部才能夠使用，否則就會報錯，寫法為：

<template> 
 {{todoList}} 
</template> 
<script> 
export default { 
 setup(){ 
  let todoList = [ 
   {todo:"我想看海",isCheck:false}, 
   {todo:"我想浪漫",isCheck:true}, 
  ] 
  return{ 
   todoList, 
  } 
 } 
} 
</script> 

使用 script setup 語法糖，不需要 return 和 setup函數，只需要全部定義到 script setup 內。

可以簡化上述代碼為：

<template> 
 {{todoList}} 
</template> 
<script setup> 
 let todoList = [ 
  {todo:"我想看海",isCheck:false}, 
  {todo:"我想浪漫",isCheck:true}, 
 ] 
</script> 

2、組件自動注冊

在 script setup 語法糖中，引入的組件可以自動注冊，不需要再通過 components 進行注冊，而且無法指定當前組件的名字，會自動以文件名為主，省去了 name 屬性。

<template> 
 <SetUp></SetUp> 
 <set-up></set-up> 
</template> 
<script setup> 
 import SetUp from "./SetUp.vue" 
</script> 

而在 setup() 寫的組合式 API 中，引入的組件必須在 components 內注冊之后才能使用，否則無法正常引入。

3、組件數據傳遞

父組件給子組件傳值時，需要 props 接收。setup( props, context )接收兩個參數，props 接收傳遞的數據，使用 setup() 接收數據如下：

<template> 
 {{ a }} {{ b }} 
</template> 
 
<script> 
import { toRefs } from "vue" 
export default { 
 setup(props,context){ 
  const { a,b } = toRefs(props) 
  return { 
   a, 
   b 
  } 
 } 
} 
</script> 

而 script setup 語法糖接收 props 中的數據時，使用 defineProps 方法來獲取，可以修改上述代碼為：

<template> 
 {{ a }} {{ b }} 
</template> 
 
<script setup> 
import { toRefs } from "vue" 
const props = defineProps({ 
  a: String, 
  b: String 
}) 
const { a, b } = toRefs( props ) 
</script> 

4、獲取 attrs、slots 和 emits

setup( props, context )接收兩個參數，context 上下文環境，其中包含了屬性、插槽、自定義事件三部分。

setup() 內獲取如下：

setup(props,context){ 
 const { attrs, slots, emit } = context 
 // attrs 獲取組件傳遞過來的屬性值， 
 // slots 組件內的插槽 
 // emit 自定義事件 子組件 
} 

 使用 script setup 語法糖時，

• useAttrs 方法 獲取 attrs 屬性
• useSlots 方法獲取 slots 插槽
• defineEmits 方法獲取 emit 自定義事件

<script setup> 
 import { useAttrs, useSlots } from 'vue' 
 const slots = useSlots(); 
 const attrs = useAttrs(); 
 
 const emits = defineEmits(['getChild']); 
</script> 

5、對外暴露屬性

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

子組件暴露屬性：

<template> 
 {{msg}} 
</template> 
 
<script setup> 
import { ref } from 'vue' 
 
let msg = ref("Child Components"); 
 
// defineExpose無需導入，直接使用 
defineExpose({ 
 msg 
}); 
</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>