vue3如何使用setup代替created
更新時(shí)間：2023年09月13日 09:35:20 作者：CA-L
Vue3中的setup是一個(gè)新的生命周期函數(shù),它可以用來(lái)代替組件中的 data和一些生命周期函數(shù)（如created和beforeMount）,這篇文章主要介紹了vue3如何使用setup代替created的相關(guān)資料,需要的朋友可以參考下
vue2中的created可使用vue3中的setup()來(lái)代替。
setup() :開(kāi)始創(chuàng)建組件之前，在beforeCreate和created之前執(zhí)行。創(chuàng)建的是data和method。
如果想要在頁(yè)面創(chuàng)建時(shí)就執(zhí)行方法，
vue2：
<script>
export default {
components: {
},
data(){
return{};
},
methods: {
func1() {
console.log("func1");
},
},
created:{
this.func1() //注意vue3中已經(jīng)不支持使用this.
}
}
</script>vue3:
<script>
export default {
setup() {
const func1= () => {
console.log("func1");
}
func1(); //因?yàn)閟etup()即相當(dāng)于created: 所以直接調(diào)用就行了
return {
};
},
}
</script>vue3使用setup語(yǔ)法糖：
<script lang="ts" setup>
const func1= () => {
console.log("func1");
}
func1(); //因?yàn)閟etup即相當(dāng)于created:
</script>總結(jié)
到此這篇關(guān)于vue3如何使用setup代替created的文章就介紹到這了,更多相關(guān)vue3 setup代替created內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一文快速學(xué)會(huì)阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)
冒泡就是事件開(kāi)始是由最具體的元素接收,然后逐層向上級(jí)傳播到較為不具體的元素,這篇文章主要給大家介紹了關(guān)于阻止事件冒泡的4種方法,文中介紹的方法分別是原生js阻止以及vue中使用修飾符阻止的相關(guān)資料,需要的朋友可以參考下2023-12-12
flv.js是一個(gè)用于在瀏覽器中解碼和播放FLV視頻的JavaScript庫(kù),它可以將FLV視頻流解碼并顯示在HTML5的video元素中,從而實(shí)現(xiàn)在瀏覽器中直接播放FLV格式的視頻文件,本文給大家介紹flv.js在vue中的使用,感興趣的朋友一起看看吧2023-11-11
vue3開(kāi)啟攝像頭并進(jìn)行拍照的實(shí)現(xiàn)示例
本文主要介紹了vue3開(kāi)啟攝像頭并進(jìn)行拍照的實(shí)現(xiàn)示例,主要是使用navigator.mediaDevices.getUserMedia這個(gè)API來(lái)實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
vue數(shù)組雙向綁定問(wèn)題及$set用法說(shuō)明
這篇文章主要介紹了vue數(shù)組雙向綁定問(wèn)題及$set用法說(shuō)明，具有很好的參考價(jià)值，希望大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關(guān)于vue中jsonp插件的使用方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼
這篇文章主要介紹了iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問(wèn)題
這篇文章主要介紹了Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue的移動(dòng)端多圖上傳插件vue-easy-uploader的示例代碼
這篇文章主要介紹了Vue的移動(dòng)端多圖上傳插件vue-easy-uploader的示例代碼,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別
這篇文章主要介紹了詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06