全套筆記資料代碼移步： 前往gitee倉(cāng)庫(kù)查看
感興趣的小伙伴可以自取哦，歡迎大家點(diǎn)贊轉(zhuǎn)發(fā)~
全套教程部分目錄：
部分文件圖片：
認(rèn)識(shí)Vue3
1. Vue3組合式API體驗(yàn)
通過(guò) Counter 案例 體驗(yàn)Vue3新引入的組合式API
<script>
export default {
data(){
return {
count:0
}
},
methods:{
addCount(){
this.count++
}
}
}
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
const addCount = ()=> count.value++
</script>
特點(diǎn)：
- 代碼量變少
- 分散式維護(hù)變成集中式維護(hù)
2. Vue3更多的優(yōu)勢(shì)
源：http://www.zghlxwxcb.cn/news/detail-840969.html
使用create-vue搭建Vue3項(xiàng)目
1. 認(rèn)識(shí)create-vue
create-vue是Vue官方新的腳手架工具，底層切換到了 vite （下一代前端工具鏈），為開發(fā)提供極速響應(yīng)
建項(xiàng)目
前置條件 - 已安裝16.0或更高版本的Node.js
執(zhí)行如下命令，這一指令將會(huì)安裝并執(zhí)行 create-vue
npm init vue@latest
目和關(guān)鍵文件
1. setup選項(xiàng)的寫法和執(zhí)行時(shí)機(jī)
寫法
<script>
export default {
setup(){
},
beforeCreate(){
}
}
</script>
執(zhí)行時(shí)機(jī)
在beforeCreate鉤子之前執(zhí)行
在setup函數(shù)中寫的數(shù)據(jù)和方法需要在末尾以對(duì)象的方式return，才能給模版使用文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-840969.html
<script>
export default {
setup(){
const message = 'this is message'
const logMessage = ()=>{
console.log(message)
}
// 必須return才可以
return {
message,
logMessage
}
}
}
</script>
3.
到了這里，關(guān)于【前端Vue】Vue3+Pinia小兔鮮電商項(xiàng)目第1篇：認(rèn)識(shí)Vue3,1. Vue3組合式API體驗(yàn)【附代碼文檔】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
