vue3 學習筆記(九)——script setup 語法糖用了才知道有多爽

語言: CN / TW / HK

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

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

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>