Vue3?-?setup?script的使用體驗分享
前言
Vue3已經(jīng)發(fā)布很長一段時間了，相信大多數(shù)前端人都已經(jīng)上手把玩過了，其中比較大的一個特性就是setup方法，可以讓我們非常直觀和方便的組合我們的業(yè)務(wù)邏輯和hooks。在setup里面返回的變量可以直接在template里面使用。大多數(shù)情況下，我們的大部分邏輯都集中在setup方法里面，所以官方提供了一個實驗性的寫法，直接在script里面寫setup的內(nèi)容，即：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>總結(jié)
setup script代碼看起來簡單了很多，開發(fā)效率大大的提高。但是很遺憾它還只是一個實驗性功能，提出的時間是：2020-10-28，至今還未發(fā)布。
不過好消息是：
不管怎么樣，小伙伴可以在本地體驗一波，會整體提升幸福感。
記住不要在生產(chǎn)環(huán)境使用哦。
到此這篇關(guān)于Vue3 - setup script使用的文章就介紹到這了,更多相關(guān)Vue3 - setup script使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue下路由History模式打包后頁面空白，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細介紹了基于vue.js實現(xiàn)分頁查詢功能，vue.js實現(xiàn)數(shù)據(jù)庫分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
vue新玩法VueUse工具庫具體用法@vueuse/core詳解
這篇文章主要介紹了vue新玩法VueUse-工具庫@vueuse/core,VueUse不是Vue.use，它是一個基于?Composition?API?的實用函數(shù)集合，下面是具體的一些用法，需要的朋友可以參考下2022-08-08
webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟
這篇文章主要介紹了webpack 3 + Vue2 使用dotenv配置多環(huán)境,env文件在配置文件都可以用, vue頁面用的時候需要在 webpack.base.conf.js 重新配置,需要的朋友可以參考下2023-11-11
今天小編就為大家分享一篇vue form 表單提交后刷新頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue是一種輕巧便捷的框架，那么如何進行對于數(shù)據(jù)加載的刷新呢？以下就是我對于vue.js數(shù)據(jù)加載的一點想法2017-06-06
vue刷新頁面時去閃爍提升用戶體驗效果的實現(xiàn)方法
這篇文章主要介紹了vue刷新頁面時去閃爍提升體驗方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
下面小編就為大家分享一篇基于vue-resource jsonp跨域問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了vue父子組件之間的傳參的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Vue3.x 自發(fā)布以來,憑借其性能的顯著提升和更加靈活的組合式 API,已經(jīng)成為了現(xiàn)代前端開發(fā)的重要工具之一,除了基本用法外,Vue3.x 還提供了許多高級功能,本文將和大家一起深入探索Vue3.x中的七大高級用法,需要的朋友可以參考下2024-03-03