vue3如何使用setup代替created
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(); //因為setup()即相當(dāng)于created: 所以直接調(diào)用就行了
return {
};
},
}
</script>vue3使用setup語法糖:
<script lang="ts" setup>
const func1= () => {
console.log("func1");
}
func1(); //因為setup即相當(dāng)于created:
</script>總結(jié)
到此這篇關(guān)于vue3如何使用setup代替created的文章就介紹到這了,更多相關(guān)vue3 setup代替created內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項目的方法
今天小編就為大家分享一篇用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項目的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解vuex數(shù)據(jù)傳輸?shù)膬煞N方式及this.$store undefined的解決辦法
這篇文章主要介紹了vuex數(shù)據(jù)傳輸?shù)膬煞N方式 及 this.$store undefined的解決辦法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作
這篇文章主要介紹了在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
從安裝到使用詳解vue項目中i18n(vue-i18n)實現(xiàn)國際化的完整指南
國際化Internationalization,通??s寫為i18n,是指設(shè)計和開發(fā)軟件應(yīng)用程序,使其能夠輕松地適應(yīng)不同的語言,下面小編就將從安裝到使用為大家進行詳細介紹2025-10-10

