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

前端人發表於2021-11-29
Vue筆記

剛開始使用 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>

 

相關文章