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

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

script setup 是啥?

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

寫法簡便：

1. <script setup> 
2. ... 
3. </script> 

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

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

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

1. <template> 
2.  {{todoList}} 
3. </template> 
4. <script> 
5. export default { 
6.  setup(){ 
7.   let todoList = [ 
8.    {todo:"我想看海",isCheck:false}, 
9.    {todo:"我想浪漫",isCheck:true}, 
10.   ] 
11.   return{ 
12.    todoList, 
13.   } 
14.  } 
15. } 
16. </script> 

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

可以簡化上述代碼為：

1. <template> 
2.  {{todoList}} 
3. </template> 
4. <script setup> 
5.  let todoList = [ 
6.   {todo:"我想看海",isCheck:false}, 
7.   {todo:"我想浪漫",isCheck:true}, 
8.  ] 
9. </script> 

2、組件自動注冊

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

1. <template> 
2.  <SetUp></SetUp> 
3.  <set-up></set-up> 
4. </template> 
5. <script setup> 
6.  import SetUp from "./SetUp.vue" 
7. </script> 

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

3、組件數據傳遞

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

1. <template> 
2.  {{ a }} {{ b }} 
3. </template> 
4.  
5. <script> 
6. import { toRefs } from "vue" 
7. export default { 
8.  setup(props,context){ 
9.   const { a,b } = toRefs(props) 
10.   return { 
11.    a, 
12.    b 
13.   } 
14.  } 
15. } 
16. </script> 

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

1. <template> 
2.  {{ a }} {{ b }} 
3. </template> 
4.  
5. <script setup> 
6. import { toRefs } from "vue" 
7. const props = defineProps({ 
8.   a: String, 
9.   b: String 
10. }) 
11. const { a, b } = toRefs( props ) 
12. </script> 

4、獲取 attrs、slots 和 emits

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

setup() 內獲取如下：

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

使用 script setup 語法糖時，

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

1. <script setup> 
2.  import { useAttrs, useSlots } from 'vue' 
3.  const slots = useSlots(); 
4.  const attrs = useAttrs(); 
5.  
6.  const emits = defineEmits(['getChild']); 
7. </script> 

5、對外暴露屬性

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

子組件暴露屬性：

1. <template> 
2.  {{msg}} 
3. </template> 
4.  
5. <script setup> 
6. import { ref } from 'vue' 
7.  
8. let msg = ref("Child Components"); 
9.  
10. // defineExpose無需導入，直接使用 
11. defineExpose({ 
12.  msg 
13. }); 
14. </script> 

父組件引用子組件暴露的屬性：

1. <template> 
2.  <Child ref="child" /> 
3. </template> 
4.  
5. <script setup> 
6. import { ref, onMounted } from 'vue' 
7. import Child from './components/Child.vue' 
8.  
9. let child = ref(null); 
10.  
11. onMounted(() => { 
12.  console.log(child.value.msg); // Child Components 
13.  console.log(child.value.num); // 123 
14. }) 
15. </script> 

原文鏈接：https://www.toutiao.com/a7033663484797796877/