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