學(xué)習(xí)vue3，都會(huì)從基礎(chǔ)知識(shí)點(diǎn)學(xué)起。了解setup函數(shù)，ref，recative，watch、comptued、pinia等如何使用
今天說vue3組合式api，setup函數(shù)
在學(xué)習(xí)過程中一開始接觸到的是這樣的，定義數(shù)據(jù)且都要通過return返回
<script>
export default {
setup(){
cosnt message = 'new day
const logMessage= ()=>{
console.log(message)
}
return {
message,
logMessage
}
}
}
</script>
最新接觸到的是這樣的
<script setup>
cosnt message = 'new day
const logMessage= ()=>{
console.log(message)
}
</script>
兩種不同的寫法，那區(qū)別是什么呢？
其實(shí)在script標(biāo)簽上直接加setup就是語法糖寫法
語法糖寫法，簡(jiǎn)單理解就是經(jīng)過一定的封裝，將之前復(fù)雜的寫法變成一個(gè)簡(jiǎn)單的寫法
原先的export default 、setup(){} ,return 都不需要寫了
官方提供了一個(gè)工具，可以在線看實(shí)際運(yùn)行后的代碼
戳這里，跳轉(zhuǎn)到vue SFC Playground官方工具
文章來源：http://www.zghlxwxcb.cn/news/detail-636376.html
看右側(cè)實(shí)際運(yùn)行的代碼，是同之前的復(fù)雜寫法的。在底層運(yùn)行的時(shí)候還是一開始的復(fù)雜寫法，只是通過封裝，提供給我們一個(gè)簡(jiǎn)單的寫法，這就是語法糖的意義。文章來源地址http://www.zghlxwxcb.cn/news/detail-636376.html
到了這里，關(guān)于【vue3】基礎(chǔ)知識(shí)點(diǎn)-setup語法糖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
