Vue3.2?setup語(yǔ)法糖及Hook函數(shù)基本使用
引言
在2021 年 8 月 5 日，Vue發(fā)布了3.2版本的新寫(xiě)法，其中最主要的亮點(diǎn)就在于setup的語(yǔ)法糖，學(xué)過(guò)Vue3.0的小伙伴都清楚，當(dāng)我們?cè)谑褂肰ue3的語(yǔ)法就構(gòu)建組件的時(shí)候，總是需要把外面定義的方法變量必須要return出去，比較麻煩一些，所以Vue官方這次提供了setup語(yǔ)法糖，有了他，我們可以更加簡(jiǎn)潔舒適的去構(gòu)建組件。
setup（語(yǔ)法糖）
1、基本使用
在vue3.2中我們不再需要進(jìn)行return，當(dāng)使用 <script setup> 的時(shí)候，任何在 <script setup> 聲明的頂層的綁定 (包括聲明的變量，函數(shù)聲明，以及 import 引入的內(nèi)容) 都可以在模板中直接使用，這是因?yàn)樵?code>setup函數(shù)中，所有的ES模板都被認(rèn)為是暴露給上下文的值，并包含在setup()返回對(duì)象中。
要使用這個(gè)語(yǔ)法，需要將 setup 屬性添加到 <script> 代碼塊上，示列：
<script setup>
import {ref} from 'vue'
let property = ref('志拾陸');
</script>
這里面的代碼會(huì)被編譯成組件 setup() 函數(shù)的內(nèi)容，這也就意味著與普通的 <script> 只在組件被首次引入的時(shí)候僅執(zhí)行一次不同，<script setup> 中的代碼會(huì)在每次組件實(shí)例被創(chuàng)建的時(shí)候執(zhí)行。這一點(diǎn)非常的重要，也就是寫(xiě)在 <script setup> 中的代碼，例如初始化的賦值等在組件每次實(shí)例創(chuàng)建時(shí)都重新執(zhí)行一次。
2、自動(dòng)注冊(cè)
使用3.2的語(yǔ)法時(shí)，如果需要像之前一樣去引入其他組件，就無(wú)需再通過(guò)components進(jìn)行注冊(cè)，我們可以直接引入使用。示列：
<template>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
//這里我們引入了子組件 subassembly
import subassembly from './subassembly.vue'
</script>
3、組件通信
defineProps ----> [用來(lái)接收父組件傳來(lái)的 props] 代碼示列：
父組件代碼:
<template>
<div>我是父組件----1</div>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import subassembly from './subassembly.vue'
//把值傳遞給子組件 ---> :title="msg" <Home @getChili="getChili" :title="msg" />
const msg = ref('父的值')
</script>
子組件代碼：
<template>
<div>我是子組件----2</div>
<div style="color: red">{{props.title}}</div>
</template>
<script setup>
import {defineProps} from 'vue'
//接收父組件 傳過(guò)來(lái)的值！
const props = defineProps({
title: {
type: String
}
});
//打印一下 接收父組件的值
console.log(props.title) //父的值
</script>
defineEmit ----> [子組件向父組件事件傳遞] 代碼示列：
子組件代碼:
<template>
<hr>
<div>我是子組件----2</div>
<button @click="toEmits">點(diǎn)擊傳到父組件</button>
</template>
<script setup>
import {defineEmits,ref} from 'vue'
//先定義一下子 在發(fā)送值
const emits = defineEmits(['getChili']);
const toEmits = () => {
emits('getChili','子的值')
}
</script>
父組件代碼:
<template>
<div>我是父組件----1</div>
<div>{{data}}</div>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import subassembly from './subassembly.vue'
//空值接收 子組件的傳值
let data = ref(null)
const getChili = (e) => {
data.value = e
console.log(e) //子組件的值
}
</script>
在標(biāo)準(zhǔn)組件寫(xiě)法里，子組件的數(shù)據(jù)都是默認(rèn)隱式暴露給父組件的，但在script-setup模式下，所有數(shù)據(jù)只是默認(rèn)return給template 使用，不會(huì)暴露到組件外，所以父組件是無(wú)法直接通過(guò)掛載ref 變量獲取子組件的數(shù)據(jù)。如果要調(diào)用子組件的數(shù)據(jù)，需要先在子組件顯示的暴露出來(lái)，才能夠正確的拿到，這個(gè)操作，就是由defineExpose來(lái)完成。
defineExpose ----> [組件暴露出自己的屬性] 代碼示列：
子組件代碼：
<template>
<div>我是子組件----2> {{ xiaoZhi.stator }}</div>
</template>
<script setup>
import {ref, defineExpose, reactive} from 'vue'
let xiaoZhi = reactive({
stator: '小志',
age: 27
})
let xiaoXiaoZhi = ref('小小志');
console.log(xiaoXiaoZhi)
defineExpose({
xiaoZhi,
xiaoXiaoZhi
})
</script>
父組件代碼:
<template>
<button @click="shiEmots">獲取暴露</button>
<subassembly ref="shield"/>
</template>
<script setup>
import subassembly from './subassembly.vue'
import {defineEmits,defineProps,ref} from 'vue'
const shield = ref()
const shiEmots = () =>{
//子組件接收暴露出來(lái)得值
console.log('接收reactive暴漏出來(lái)的值',shield.value.xiaoZhi)
console.log('接收ref暴漏出來(lái)的值',shield.value.xiaoXiaoZhi)
}
</script>
結(jié)果：
hook函數(shù)
介紹：
- Vue3 的 hook函數(shù) 相當(dāng)于 vue2 的 mixin, 不同在與 hooks 是函數(shù)
- Vue3 的 hook函數(shù) 可以幫助我們提高代碼的復(fù)用性, 讓我們能在不同的組件中都利用 hooks 函數(shù)
示列 :
1、首先我們需要?jiǎng)?chuàng)建一個(gè)hooks的文件 文件示列：
2、在hookds文件下，我們創(chuàng)建一個(gè)我們需要使用的.js文件 這里我們比如時(shí)usePoint.js
這里我們?cè)趗sePoint里面寫(xiě)了一個(gè)獲取鼠標(biāo)點(diǎn)擊位置的方法 代碼示列：
import {reactive, onMounted, onBeforeUnmount} from 'vue'
export default function () {
//展示的數(shù)據(jù) 可以通過(guò)App.vue 界面去隱藏
let point = reactive({
x: 0,
y: 0
})
//獲取鼠標(biāo)點(diǎn)擊事件
function savePonint(event) {
point.x = event.pageX
point.y = event.pageY
console.log(event.pageX, event.pageY)
}
//現(xiàn)實(shí)之后調(diào)用 掛載完畢
onMounted(() => {
window.addEventListener('click', savePonint)
})
//在隱藏之前調(diào)用 卸載之前
onBeforeUnmount(() => {
window.removeEventListener('click', savePonint)
})
return point
}
我們?cè)诮M件中引入此文件 代碼示列：
<template>
<h3>當(dāng)前求和:{{ sum }}</h3>
<button @click="sum++">點(diǎn)我加一</button>
<hr>
<h3>當(dāng)前鼠標(biāo)點(diǎn)擊坐標(biāo)為:x:{{ point.x }},y:{{ point.y }}</h3>
</template>
<script>
import {ref} from 'vue'
//復(fù)用的usePoint
import usePoint from "../hooks/usePoint";
export default {
name: 'App',
setup() {
//數(shù)據(jù)
let sum = ref(0)
let point = usePoint()
return {sum,point}
},
}
</script>
結(jié)果展示：
總得來(lái)說(shuō)，新引入的setup語(yǔ)法糖的 目的是簡(jiǎn)化使用Composition API時(shí)冗長(zhǎng)的模板代碼，也就是讓代碼更加簡(jiǎn)潔，閱讀性也越高。而在組件中引入并使用自定義hook 自定義hook的作用類似于vue2中的mixin技術(shù) 自定義Hook的優(yōu)勢(shì): 很清楚復(fù)用功能代碼的來(lái)源, 更清楚易懂！
以上就是Vue3.2 setup語(yǔ)法糖及Hook函數(shù)基本使用的詳細(xì)內(nèi)容，更多關(guān)于Vue3.2 setup語(yǔ)法糖Hook函數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue的data、computed、watch源碼淺談，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
本篇文章主要介紹了Vuex提升學(xué)習(xí)篇，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue引用外部JS并調(diào)用JS文件中的方法實(shí)例
我們?cè)谧鰒ue項(xiàng)目時(shí),經(jīng)常會(huì)需要引入js,下面這篇文章主要給大家介紹了關(guān)于vue引用外部JS并調(diào)用JS文件中的方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
ElementUI實(shí)現(xiàn)el-form表單重置功能按鈕
本文主要介紹了Element使用el-form時(shí)，點(diǎn)擊重置按鈕或者取消按鈕時(shí)會(huì)實(shí)現(xiàn)表單重置效果，具有一定的參考價(jià)值，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了Vue父組件監(jiān)聽(tīng)子組件生命周期,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
當(dāng)頁(yè)面刷新時(shí),Vuex?的?state?數(shù)據(jù)會(huì)丟失,這是因?yàn)?Vuex?的狀態(tài)存儲(chǔ)在內(nèi)存中,刷新瀏覽器會(huì)重置?JavaScript?的運(yùn)行環(huán)境,下面我將詳細(xì)介紹幾種解決方案,從簡(jiǎn)單到復(fù)雜,幫助你根據(jù)項(xiàng)目需求選擇最適合的方法,需要的朋友可以參考下2025-04-04
bpmn.js是一個(gè)BPMN2.0渲染工具包和web建模器,使得畫(huà)流程圖的功能在前端來(lái)完成,這篇文章主要給大家介紹了關(guān)于vue3集成bpmn.js的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)
最近在使用Element開(kāi)發(fā)時(shí)遇到了不少問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級(jí)結(jié)構(gòu)與用法的相關(guān)資料,需要的朋友可以參考下2022-12-12
詳解vue項(xiàng)目中調(diào)用百度地圖API使用方法
這篇文章主要介紹了vue項(xiàng)目中調(diào)用百度地圖API使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04