VUE3函數(shù)的聲明和使用舉例
在了解了響應(yīng)式數(shù)據(jù)如何使用之后，接下來(lái)就要開(kāi)始了解函數(shù)了。
在 Vue 2 ，函數(shù)通常是作為當(dāng)前組件實(shí)例上的方法在 methods 里聲明，然后再在 mounted 等生命周期里調(diào)用，或者是在模板里通過(guò) Click 等行為觸發(fā)，由于組件內(nèi)部經(jīng)常需要使用 this 獲取組件實(shí)例，因此不能使用箭頭函數(shù)。
export default {
data: () => {
return {
num: 0,
}
},
mounted: function () {
this.add()
},
methods: {
// 不可以使用 `add: () => this.num++`
add: function () {
this.num++
},
},
}在 Vue 3 則靈活了很多，可以使用普通函數(shù)、 Class 類(lèi)、箭頭函數(shù)、匿名函數(shù)等等進(jìn)行聲明，可以將其寫(xiě)在 setup 里直接使用，也可以抽離在獨(dú)立的 .js / .ts 文件里再導(dǎo)入使用。
需要在組件創(chuàng)建時(shí)自動(dòng)執(zhí)行的函數(shù)，其執(zhí)行時(shí)機(jī)需要遵循 Vue 3 的生命周期，需要在模板里通過(guò) @click、@change 等行為觸發(fā)，和變量一樣，需要把函數(shù)名在 setup 里進(jìn)行 return 出去。
下面是一個(gè)簡(jiǎn)單的例子，方便開(kāi)發(fā)者更直觀地了解：
<template>
<p>{{ msg }}</p>
<!-- 在這里點(diǎn)擊執(zhí)行 `return` 出來(lái)的方法 -->
<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!')
// 這個(gè)要暴露給模板使用，必須 `return` 才可以使用
function updateMsg() {
msg.value = 'Hi World!'
}
// 這個(gè)要在頁(yè)面載入時(shí)執(zhí)行，無(wú)需 `return` 出去
const init = () => {
console.log('init')
}
onMounted(() => {
init()
})
return {
msg,
changeMsg,
}
},
})
</script>總結(jié)
到此這篇關(guān)于VUE3函數(shù)的聲明和使用的文章就介紹到這了,更多相關(guān)VUE3函數(shù)聲明使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑
有一些驗(yàn)證不是通過(guò)input select這樣的受控組件來(lái)觸發(fā)驗(yàn)證條件的 ,可以通過(guò)自定義驗(yàn)證的方法來(lái)觸發(fā),下面這篇文章主要給大家介紹了關(guān)于Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue2.0利用 v-model 實(shí)現(xiàn)組件props雙向綁定的優(yōu)美解決方案
本篇文章主要介紹了Vue2 利用 v-model 實(shí)現(xiàn)組件props雙向綁定的優(yōu)美解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了vue中activated的用法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了理順8個(gè)版本vue的區(qū)別(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue中marker被識(shí)別點(diǎn)擊的過(guò)程場(chǎng)景分析
這篇文章主要介紹了vue中marker被識(shí)別點(diǎn)擊的過(guò)程場(chǎng)景分析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了使用vite項(xiàng)目打包資源分配目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能示例詳解
這篇文章主要介紹了vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-09-09
Vue3 + MybatisPlus實(shí)現(xiàn)批量刪除功能(詳細(xì)代碼)
這篇文章主要介紹了Vue3 + MybatisPlus實(shí)現(xiàn)批量刪除功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Vue移動(dòng)端用淘寶彈性布局lib-flexible插件做適配的方法
這篇文章主要介紹了Vue移動(dòng)端用淘寶彈性布局lib-flexible插件做適配的操作方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
vue中格式化時(shí)間過(guò)濾器代碼實(shí)例
這篇文章主要介紹了vue格式化時(shí)間過(guò)濾器，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04