Vue3 - setup script超爽體驗，你值得一試

前言

Vue3已經發布很長一段時間了，相信大多數前端人都已經上手把玩過了，其中比較大的一個特性就是setup方法，可讓咱們很是直觀和方便的組合咱們的業務邏輯和hooks。在setup裏面返回的變量能夠直接在template裏面使用。大多數狀況下，咱們的大部分邏輯都集中在setup方法裏面，因此官方提供了一個實驗性的寫法，直接在script裏面寫setup的內容，即：setup script。

使用

咱們以前的組件多是這樣的：

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50"> <Card>{{msg}}</Card> </div>
</template>
<script lang="ts"> import { ref, defineComponent } from "vue"; import Card from "./components/Card.vue"; export default defineComponent({ components: { Card, }, setup() { const msg = ref("setup script"); return { msg }; } }); </script>
複製代碼

這裏作了兩件事，一個是導入並註冊組件，一個是導出一個字符串給template使用。

啓用setup script以後是這樣的：

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50"> <Card>{{msg}}</Card> </div>
</template>


<script lang="ts" setup> import { ref } from "vue"; import Card from "./components/Card.vue"; const msg = ref("setup script"); </script>
複製代碼

這裏省去了組件的註冊步驟，也沒有顯式的導出變量的動做。

雖然是實驗性功能，但仍是開箱即用，你只須要在script上配置setup便可。

導出變量&方法

在setup script裏面定義的全部變量都會自動導出。很是方便

<script lang="ts" setup>
import { ref } from "vue";
const msg = ref("setup script");
const handlerClick = () => {
  console.log("on click");
};
</script>
複製代碼

使用組件

全部的組件導入便可自動註冊：

<script lang="ts" setup>
import Card from "./components/Card.vue";
import Button from "./components/Button.vue";
</script>
複製代碼

使用props - defineProps

使用props須要用到defineProps來定義，具體用法跟以前的props寫法相似：

<script lang="ts" setup>
import { defineProps } from "vue";
const props = defineProps(['title', 'content']);
</script>
複製代碼

給props定義類型：

const props = defineProps({
  title: String,
  content: {
      type: Stirng,
      required: true
  }
});
複製代碼

使用TS的註解的方式：

defineProps<{
  title?: string
  content: string
}>();
複製代碼

使用emits - defineEmit

使用defineEmit對組件裏面使用到的事件進行驗證和定義：

const emit = defineEmit(['onHeaderClick'])
emit('onHeaderClick', 'params')

// 對事件進行驗證
const emit = defineEmit({
    onHeaderClick: ({title}) => {
        if(!title) {
            console.warn('Invalid title')
            return false
        }
        return true
    }
})
複製代碼

具體的用法跟以前的同樣。

使用context - useContext

使用useContext獲取上下文：

import { useContext } from 'vue'
const { slots, attrs } = useContext()
複製代碼

獲取到的slots attrs跟以前的setup裏面的是同樣的。

指令

指令跟組件同樣，導入自定註冊：

<script setup>
  import {color} from './v-color'
</script>

<template> <div v-color /> </template>
複製代碼

導入的color自動映射爲指令v-color

<script setup>
  import {color as superColor} from './v-color'
</script>

<template> <div v-super-color /> </template>
複製代碼

總結

setup script代碼看起來簡單了不少，開發效率大大的提升。可是很遺憾它還只是一個實驗性功能，提出的時間是：2020-10-28，至今還未發佈。

不過好消息是：

無論怎麼樣，小夥伴能夠在本地體驗一波，會總體提高幸福感。

記住不要在生產環境使用哦。