這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語法糖拒絕寫return的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
目錄
Vue3.2 setup語法糖1.<script setup>在<template/>使用2、<script setup>引入組件將自動注冊3、組件通信:defineProps 代替propsdefineEmit 代替emit4.<script setup>需主動向父組件暴露子組件屬性 ：defineExpose5.語法糖其他功能6.在setup訪問路由Vue3.2 setup語法糖
Vue3.2 setup語法糖 [ 單文件組件的語法糖<script setup> ]
如果你對Vue3語法糖有一定了解，配和我另外一篇一起食用更好哦！
Vue3必學(xué)技巧-自定義Hooks-讓寫Vue3更暢快閱讀本來，默認(rèn)你已經(jīng)對Vue3.0的composition API有一定了解，但困擾于setup函數(shù)內(nèi)需要繁瑣return相關(guān)的變量和函數(shù)，那setup的語法糖<script setup> 你將收獲滿滿。語法糖<script setup> 的引入讓你寫Vue3更爽，讓Vue3更豐滿。本文是在官方文檔基礎(chǔ)上寫的，如果有時(shí)間，建議上
官方文檔上看，本文寫得更為語義化和通俗，希望你能喜歡。
<script setup> 是在單文件組件 (SFC) 中使用組合式 API 的編譯時(shí)語法糖
解決Vue3.0中setup需要繁瑣將聲明的變量、函數(shù)以及 import 引入的內(nèi)容通過return向外暴露,才能在<template/>使用的問題
1.<script setup>在<template/>使用
<script setup>中無需return 聲明的變量、函數(shù)以及import引入的內(nèi)容，即可在<template/>使用
<script setup>語法糖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script setup>
//import引入的內(nèi)容
import { getToday } from './utils'
// 變量
const msg = 'Hello!'
// 函數(shù)
function log() {
console.log(msg)
}
</script>
//在template中直接使用聲明的變量、函數(shù)以及import引入的內(nèi)容
<template>
<div @click="log">{{ msg }}</div>
<p>{{getToday()}}</p>
</template>
標(biāo)準(zhǔn)組件<script> 需要寫setup函數(shù)并繁瑣retrun
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
//import引入的內(nèi)容
import { getToday } from './utils'
export default{
setup(){
// 變量
const msg = 'Hello!'
// 函數(shù)
function log() {
console.log(msg)
}
//想在tempate里面使用需要在setup內(nèi)return暴露出來
return{
msg,
log,
getToday
}
}
}
</script>
<template>
<div @click="log">{{ msg }}</div>
<p>{{getToday()}}</p>
</template>
小結(jié)：<script setup>語法糖里面的代碼會被編譯成組件 setup() 函數(shù)的內(nèi)容，不需要通過return暴露 聲明的變量、函數(shù)以及import引入的內(nèi)容，即可在<template/>使用，并且不需要寫export default{}
<script setup>語法糖里面的代碼會被編譯成組件 setup() 函數(shù)的內(nèi)容。這意味著與普通的 <script> 只在組件被首次引入的時(shí)候執(zhí)行一次不同，<script setup> 中的代碼會在每次組件實(shí)例被創(chuàng)建的時(shí)候執(zhí)行
1
2
3
4
5
6
7
8
<script>
console.log('script');//多次實(shí)例組件,只觸發(fā)一次
export default {
setup() {
console.log('setupFn');//每次實(shí)例化組件都觸發(fā)和script-setup標(biāo)簽一樣
}
}
</script>
（script-setup標(biāo)簽最終都會編譯成setup() 函數(shù)的內(nèi)容，每次實(shí)例化組件，就是實(shí)例化一次setup函數(shù)。script標(biāo)簽里面的setup函數(shù)也是一樣每次實(shí)例化組件，就是實(shí)例化一次setup函數(shù)，但是script標(biāo)簽setup是需要寫在export default{}內(nèi)的，外的只是首次引入的時(shí)候執(zhí)行一次）
2、<script setup>引入組件將自動注冊
不需要在引入組件后，通過 components:{}注冊組件，可直接使用
1
2
3
4
5
6
7
<script setup>
import MyComponent from './MyComponent.vue'
//components:{MyComponent} 不需要注冊直接使用
</script>
<template>
<MyComponent />
</template>
3、組件通信:
在<script setup>中必須使用 defineProps 和 defineEmits API 來替代 props 和 emits
defineProps 和 defineEmits具備完整的類型推斷并且在 <script setup> 中是直接可用的(瀏覽了一下掘金，發(fā)現(xiàn)大部分文章demo還是通過import引入這2個(gè)api，這點(diǎn)官方文檔寫得很清楚)
defineProps 代替props
接收父組件傳遞的數(shù)據(jù)（父組件向子組件傳參）
父組件:
1
2
3
4
5
6
7
8
9
<template>
<div>父組件</div>
<Child :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const msg = ref('父的值') //自動返回，在template直接解套使用
</script>
子組件：
<template/> 中可以直接使用父組件傳遞的props （可省略props.）
<script-setup> 需要通過props.xx獲取父組件傳遞過來的props
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div>子組件</div>
<div>父組件傳遞的值：{{title}}</div>
</template>
<script setup>
//import {defineProps} from 'vue' 不需要引入
//語法糖必須使用defineProps替代props
const props = defineProps({
title: {
type: String
}
});
//script-setup 需要通過props.xx獲取父組件傳遞過來的props
console.log(props.title) //父的值
</script>
defineEmit 代替emit
子組件向父組件傳遞數(shù)據(jù)（子組件向外暴露數(shù)據(jù)）
子組件代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<div>子組件</div>
<button @click="toEmits">子組件向外暴露數(shù)據(jù)</button>
</template>
<script setup>
import {ref} from 'vue'
const name = ref('我是子組件')
//1、暴露內(nèi)部數(shù)據(jù)
const emits = defineEmits(['childFn']);
const toEmits = () => {
//2、觸發(fā)父組件中暴露的childFn方法并攜帶數(shù)據(jù)
emits('childFn',name)
}
</script>
父組件代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<div>父組件</div>
<Child @childFn='childFn' />
<p>接收子組件傳遞的數(shù)據(jù){{childData}} </p>
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const childData = ref(null)
const childFn=(e)=>{
consloe.log('子組件觸發(fā)了父組件childFn，并傳遞了參數(shù)e')
childData=e.value
}
</script>
4.<script setup>需主動向父組件暴露子組件屬性 ：defineExpose
使用 <script setup> 的組件，父組件是無法通過ref 或者 $parent 獲取到子組件的ref等響應(yīng)數(shù)據(jù)，需要通過defineExpose 主動暴露
子組件代碼：
1
2
3
4
5
6
7
8
9
10
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
//主動暴露組件屬性
defineExpose({
a,
b
})
</script>
父組件代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div>父組件</div>
<Child ref='childRef' />
<button @click='getChildData'>通過ref獲取子組件的屬性 </button>
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const childRef= ref() //注冊響應(yīng)數(shù)據(jù)
const getChildData =()=>{
//子組件接收暴露出來得值
console.log(childRef.value.a) //1
console.log(childRef.value.b) //2 響應(yīng)式數(shù)據(jù)
}
</script>
5.語法糖其他功能
useSlots 和 useAttrs （少用，由于大部分人是SFC模式開發(fā)，在<template/>通過<slot/>標(biāo)簽就可以渲染插槽）
如果需要在script-setup中使用 slots 和 attrs 需要用useSlots 和 useAttrs替代
需要引入：import { useSlots ,useAttrs } form 'vue'
在<template/>中通過 $slots 和 $attrs 來訪問更方便（attrs用來獲取父組件中非props的傳遞到子組件的參數(shù)/方法，attrs 用來獲取父組件中非props的傳遞到子組件的參數(shù)/方法，attrs用來獲取父組件中非props的傳遞到子組件的參數(shù)/方法，slots可以獲取父組件中插槽傳遞的虛擬dom對象，在SFC模式應(yīng)該用處不大，在JSX /TSX使用比較多）
父組件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<Child msg="非porps傳值子組件用attrs接收" >
<!-- 匿名插槽 -->
<span >默認(rèn)插槽</span>
<!-- 具名插槽 -->
<template #title>
<h1>具名插槽</h1>
</template>
<!-- 作用域插槽 -->
<template #footer="{ scope }">
<footer>作用域插槽——姓名：{{ scope.name }}，年齡{{ scope.age }}</footer>
</template>
</Child>
</template>
<script setup>
// 引入子組件
import Child from './child.vue'
</script>
子組件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
<!-- 匿名插槽 -->
<slot />
<!-- 具名插槽 -->
<slot name="title" />
<!-- 作用域插槽 -->
<slot name="footer" :scope="state" />
<!-- $attrs 用來獲取父組件中非props的傳遞到子組件的參數(shù) -->
<p>{{ attrs.msg == $attrs.msg }}</p>
<!--true 沒想到有啥作用... -->
<p>{{ slots == $slots }}</p>
</template>
<script setup>
import { useSlots, useAttrs, reactive, toRef } from 'vue'
const state = reactive({
name: '張三',
age: '18'
})
const slots = useSlots()
console.log(slots.default()); //獲取到默認(rèn)插槽的虛擬dom對象
console.log(slots.title()); //獲取到具名title插槽的虛擬dom對象
// console.log(slots.footer()); //報(bào)錯(cuò) 不知道為啥有插槽作用域的無法獲取
//useAttrs() 用來獲取父組件傳遞的過來的屬性數(shù)據(jù)的（也就是非 props 的屬性值）。
const attrs = useAttrs()
</script>
useSlots或許在JSX/TSX下更實(shí)用
想使用JSX語法在vite需要下載相關(guān)jsx的plugins才能識別jsxuseSlots 可以獲取父組件傳遞過來插槽的虛擬dom對象，可以用來渲染插槽內(nèi)容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script lang='jsx'>
import { defineComponent, useSlots } from "vue";
export default defineComponent({
setup() {
// 獲取插槽數(shù)據(jù)
const slots = useSlots();
// 渲染組件
return () => (
<div>
{slots.default?slots.default():''}
{slots.title?slots.title():''}
</div>
);
},
});
</script>
大部分人是SFC模式開發(fā)，在<template/>通過<slot/>標(biāo)簽就可以渲染插槽，這種JSX 的寫法應(yīng)該是很少人會使用的
6.在setup訪問路由
訪問路由實(shí)例組件信息：route和router
setup 里不能訪問 this，不能再直接訪問 this.$router 或 this.$route。（getCurrentInstance可以替代this但不推薦）
推薦：使用useRoute 函數(shù)和useRouter函數(shù)替代this.$route 和 this.$router
1
2
3
4
5
6
7
8
9
10
11
12
13
<script setup>
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
function pushWithQuery(query) {
router.push({
name: 'search',
query: {
...route.query,
},
})
}
<script/>
導(dǎo)航守衛(wèi)
仍然可以使用路由實(shí)例組件的導(dǎo)航守衛(wèi)
1
2
3
import router from './router'
router.beforeEach((to,from,next)=>{
})
也可以使用組合式api的導(dǎo)航守衛(wèi)onBeforeRouteLeave, onBeforeRouteUpdate
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
// 與 beforeRouteLeave 相同，無法訪問 `this`
onBeforeRouteLeave((to, from) => {
const answer = window.confirm(
'Do you really want to leave? you have unsaved changes!'
)
// 取消導(dǎo)航并停留在同一頁面上
if (!answer) return false
})
const userData = ref()
// 與 beforeRouteUpdate 相同，無法訪問 `this`
onBeforeRouteUpdate(async (to, from) => {
//僅當(dāng) id 更改時(shí)才獲取用戶，例如僅 query 或 hash 值已更改
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id)
}
})
<script/>
組合式 API 守衛(wèi)也可以用在任何由 `<router-view>` 渲染的組件中，它們不必像組件內(nèi)守衛(wèi)那樣直接用在路由組件上。
小結(jié)：setup的語法糖作為Vue3的補(bǔ)充，讓Vue3更加豐滿，讓我們寫Vue3更爽。如果覺得寫得還不錯(cuò)不吝嗇給點(diǎn)給贊再走吧！
如果你看完后覺得意猶未盡，似乎沒get到Vue3究竟好在哪？請了解下Vue3的自定義Hooks！
Vue3配合自定義Hooks或許才是Vue3的完全體！因?yàn)橛胁糠秩丝赐赀@篇后，還覺得Vue3函數(shù)和變量寫在一起不優(yōu)雅！不妨看下這篇！
