Vue3?-?setup?script的使用體驗(yàn)分享
前言
Vue3已經(jīng)發(fā)布很長(zhǎng)一段時(shí)間了，相信大多數(shù)前端人都已經(jīng)上手把玩過(guò)了，其中比較大的一個(gè)特性就是setup方法，可以讓我們非常直觀和方便的組合我們的業(yè)務(wù)邏輯和hooks。在setup里面返回的變量可以直接在template里面使用。大多數(shù)情況下，我們的大部分邏輯都集中在setup方法里面，所以官方提供了一個(gè)實(shí)驗(yàn)性的寫法，直接在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>這里做了兩件事，一個(gè)是導(dǎo)入并注冊(cè)組件，一個(gè)是導(dǎo)出一個(gè)字符串給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>這里省去了組件的注冊(cè)步驟，也沒(méi)有顯式的導(dǎo)出變量的動(dòng)作。
雖然是實(shí)驗(yàn)性功能，但還是開(kāi)箱即用，你只需要在script上配置setup即可。
導(dǎo)出變量&方法
在setup script里面定義的所有變量都會(huì)自動(dòng)導(dǎo)出。非常方便
<script lang="ts" setup>
import { ref } from "vue";
const msg = ref("setup script");
const handlerClick = () => {
console.log("on click");
};
</script>使用組件
所有的組件導(dǎo)入即可自動(dòng)注冊(cè)：
<script lang="ts" setup> import Card from "./components/Card.vue"; import Button from "./components/Button.vue"; </script>
使用props - defineProps
使用props需要用到defineProps來(lái)定義，具體用法跟之前的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對(duì)組件里面使用到的事件進(jìn)行驗(yàn)證和定義：
const emit = defineEmit(['onHeaderClick'])
emit('onHeaderClick', 'params')
// 對(duì)事件進(jìn)行驗(yàn)證
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里面的是一樣的。
指令
指令跟組件一樣，導(dǎo)入自定注冊(cè)：
<script setup>
import {color} from './v-color'
</script>
<template>
<div v-color />
</template>導(dǎo)入的color自動(dòng)映射為指令v-color
<script setup>
import {color as superColor} from './v-color'
</script>
<template>
<div v-super-color />
</template>總結(jié)
setup script代碼看起來(lái)簡(jiǎn)單了很多，開(kāi)發(fā)效率大大的提高。但是很遺憾它還只是一個(gè)實(shí)驗(yàn)性功能，提出的時(shí)間是：2020-10-28，至今還未發(fā)布。
不過(guò)好消息是：
不管怎么樣，小伙伴可以在本地體驗(yàn)一波，會(huì)整體提升幸福感。
記住不要在生產(chǎn)環(huán)境使用哦。
到此這篇關(guān)于Vue3 - setup script使用的文章就介紹到這了,更多相關(guān)Vue3 - setup script使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE是通過(guò)傳遞一些配置給Vue對(duì)象和頁(yè)面中引用插值表達(dá)式來(lái)操作DOM的,下面這篇文章主要給大家介紹了關(guān)于Vue3中操作dom的四種方式總結(jié),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue中使用eslint和prettier格式化代碼方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue iview的菜單組件Mune 點(diǎn)擊不高亮的解決方案
今天小編就為大家分享一篇vue iview的菜單組件Mune 點(diǎn)擊不高亮的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了uni-app?開(kāi)發(fā)微信小程序定位,通過(guò)使用onLocationChange方法持續(xù)監(jiān)聽(tīng)地址，根據(jù)定位精度字段判斷是否使用此次定位的經(jīng)緯度，需要的朋友可以參考下2022-04-04
Vue中的transition封裝組件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的transition封裝組件的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
使用element-ui,el-row中的el-col數(shù)據(jù)為空頁(yè)面布局變亂問(wèn)題
這篇文章主要介紹了使用element-ui,el-row中的el-col數(shù)據(jù)為空頁(yè)面布局變亂問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了在vue中如何引入外部的css文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法
Editor.js是一個(gè)用于構(gòu)建具有完全可定制化塊結(jié)構(gòu)的現(xiàn)代編輯器的開(kāi)源庫(kù),它提供了一個(gè)簡(jiǎn)潔、可擴(kuò)展和易于使用的接口,使開(kāi)發(fā)人員能夠創(chuàng)建擁有豐富內(nèi)容和互動(dòng)性的編輯器,這篇文章主要給大家介紹了關(guān)于vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法,需要的朋友可以參考下2024-04-04
Vue中的echarts圖表如何實(shí)現(xiàn)loading效果
這篇文章主要介紹了Vue中的echarts圖表如何實(shí)現(xiàn)loading效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問(wèn)
這篇文章主要介紹了Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問(wèn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10