VUE3中的函數(shù)的聲明和使用
VUE3函數(shù)的聲明和使用
在了解了響應(yīng)式數(shù)據(jù)如何使用之后，接下來(lái)就要開始了解函數(shù)了。
在Vue2中函數(shù)
通常是作為當(dāng)前組件實(shí)例上的方法在 methods 里聲明，然后再在 mounted 等生命周期里調(diào)用，或者是在模板里通過 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++
},
},
}
在Vue3則靈活了很多
可以使用普通函數(shù)、 Class 類、箭頭函數(shù)、匿名函數(shù)等等進(jìn)行聲明，可以將其寫在 setup 里直接使用，也可以抽離在獨(dú)立的 .js / .ts 文件里再導(dǎo)入使用。
需要在組件創(chuàng)建時(shí)自動(dòng)執(zhí)行的函數(shù)，其執(zhí)行時(shí)機(jī)需要遵循 Vue 3 的生命周期，需要在模板里通過 @click、@change 等行為觸發(fā)，和變量一樣，需要把函數(shù)名在 setup 里進(jìn)行 return 出去。
下面是一個(gè)簡(jiǎn)單的例子
方便開發(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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中data數(shù)據(jù)之間互相訪問的實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目中data數(shù)據(jù)之間互相訪問的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了Vue分頁(yè)查詢?cè)趺磳?shí)現(xiàn)，使用vue實(shí)現(xiàn)分頁(yè)的邏輯并不復(fù)雜，接收后端傳輸過來(lái)的數(shù)據(jù)，然后根據(jù)數(shù)據(jù)的總數(shù)和每一頁(yè)的數(shù)據(jù)量就可以計(jì)算出一共可以分成幾頁(yè)2023-04-04
詳解swiper在vue中的應(yīng)用(以3.0為例）
這篇文章主要介紹了詳解swiper在vue中的應(yīng)用(以3.0為例），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09
element組件el-date-picker禁用當(dāng)前時(shí)分秒之前的日期時(shí)間選擇
本文主要介紹了element組件el-date-picker禁用當(dāng)前時(shí)分秒之前的日期時(shí)間選擇，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue輪播圖組件的封裝可通過封裝組件、使用插件、配置化等方式實(shí)現(xiàn)，主要包括圖片預(yù)加載、定時(shí)輪播、無(wú)限滾動(dòng)、手勢(shì)滑動(dòng)、響應(yīng)式布局等功能，實(shí)現(xiàn)方式可使用Vue的生命周期函數(shù)、自定義事件、計(jì)算屬性等技術(shù)2023-04-04
karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例，這次搭建的測(cè)試環(huán)境和開發(fā)環(huán)境隔離，所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05
詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別
這篇文章主要介紹了詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
詳解使用VueJS開發(fā)項(xiàng)目中的兼容問題
這篇文章主要介紹了詳解使用VueJS開發(fā)項(xiàng)目中的兼容問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-08-08
vue3中使用viewerjs實(shí)現(xiàn)圖片預(yù)覽效果的項(xiàng)目實(shí)踐
viewer.js是一款開源的圖片預(yù)覽插件,功能十分強(qiáng)大,本文主要介紹了vue3中使用viewerjs實(shí)現(xiàn)圖片預(yù)覽效果的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
vue 使用localstorage實(shí)現(xiàn)面包屑的操作
這篇文章主要介紹了vue 使用localstorage實(shí)現(xiàn)面包屑的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-11-11