VUE3函數(shù)的聲明和使用舉例
在了解了響應(yīng)式數(shù)據(jù)如何使用之后，接下來就要開始了解函數(shù)了。
在 Vue 2 ，函數(shù)通常是作為當(dāng)前組件實例上的方法在 methods 里聲明，然后再在 mounted 等生命周期里調(diào)用，或者是在模板里通過 Click 等行為觸發(fā)，由于組件內(nèi)部經(jīng)常需要使用 this 獲取組件實例，因此不能使用箭頭函數(shù)。
export default {
data: () => {
return {
num: 0,
}
},
mounted: function () {
this.add()
},
methods: {
// 不可以使用 `add: () => this.num++`
add: function () {
this.num++
},
},
}在 Vue 3 則靈活了很多，可以使用普通函數(shù)、 Class 類、箭頭函數(shù)、匿名函數(shù)等等進(jìn)行聲明，可以將其寫在 setup 里直接使用，也可以抽離在獨立的 .js / .ts 文件里再導(dǎo)入使用。
需要在組件創(chuàng)建時自動執(zhí)行的函數(shù)，其執(zhí)行時機(jī)需要遵循 Vue 3 的生命周期，需要在模板里通過 @click、@change 等行為觸發(fā)，和變量一樣，需要把函數(shù)名在 setup 里進(jìn)行 return 出去。
下面是一個簡單的例子，方便開發(fā)者更直觀地了解：
<template>
<p>{{ msg }}</p>
<!-- 在這里點擊執(zhí)行 `return` 出來的方法 -->
<button @click="updateMsg">修改MSG</button>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
setup() {
const msg = ref<string>('Hello World!')
// 這個要暴露給模板使用，必須 `return` 才可以使用
function updateMsg() {
msg.value = 'Hi World!'
}
// 這個要在頁面載入時執(zhí)行，無需 `return` 出去
const init = () => {
console.log('init')
}
onMounted(() => {
init()
})
return {
msg,
changeMsg,
}
},
})
</script>總結(jié)
到此這篇關(guān)于VUE3函數(shù)的聲明和使用的文章就介紹到這了,更多相關(guān)VUE3函數(shù)聲明使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue中出現(xiàn)首屏白屏的六種解決方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考一下2025-02-02
vue3+electron12+dll開發(fā)客戶端配置詳解
本文將結(jié)合實例代碼，介紹vue3+electron12+dll客戶端配置,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要介紹了使用vant-uploader上傳照片無法刪除的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue 框架之鍵盤事件、健值修飾符、雙向數(shù)據(jù)綁定
這篇文章主要介紹了Vue 框架之鍵盤事件、健值修飾符、雙向數(shù)據(jù)綁定問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
Lambda函數(shù),也稱為匿名函數(shù),是Vue3中的一種函數(shù)類型,綁定匿名方法和綁定普通方法主要是寫法上的區(qū)別,其他的區(qū)別并不是很大,本文主要介紹了Vue3中使用匿名函數(shù)的方法實現(xiàn),感興趣的可以了解一下2023-12-12
圖文詳解Element-UI中自定義修改el-table樣式
elementUI提供的組件間距、樣式都比較大,如果直接套用,在頁面顯示可能就會顯得很大,就比如表格,表頭、行寬如果不修改的話,遇到列較多的時候,會顯得整個頁面就不好看,下面這篇文章主要給大家介紹了關(guān)于Element-UI中自定義修改el-table樣式的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue使用Google Recaptcha驗證的實現(xiàn)示例
我們最近的項目中需要使用谷歌機(jī)器人驗證，所以就動手實現(xiàn)一下，本文就來詳細(xì)的介紹一下vue Google Recaptcha驗證，感興趣的可以了解一下2021-08-08
眾所周知keep-alive是Vue提供的一個抽象組件，主要是用來對組件進(jìn)行緩存，從而做到節(jié)省性能，這篇文章主要給大家介紹了關(guān)于vue中keep-alive組件用法的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了vue中格式化element表格中的時間為指定格式,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Vue頁面路由參數(shù)的傳遞和獲取方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2026-03-03