【前端Vue】Vue3+Pinia小兔鮮電商專案第1篇：認識Vue3,1. Vue3組合式API體驗【附程式碼文件】

全套筆記資料程式碼移步： 前往gitee倉庫檢視

感興趣的小夥伴可以自取哦，歡迎大家點贊轉發~

---

全套教程部分目錄：

---

部分檔案圖片：

認識Vue3

1. Vue3組合式API體驗

透過 Counter 案例 體驗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>

特點：

1. 程式碼量變少
2. 分散式維護變成集中式維護

2. Vue3更多的優勢

![image.png](

使用create-vue搭建Vue3專案

1. 認識create-vue

create-vue是Vue官方新的腳手架工具，底層切換到了 vite （下一代前端工具鏈），為開發提供極速響應

![image.png](

2. 使用create-vue建立專案

前置條件 - 已安裝16.0或更高版本的Node.js

執行如下命令，這一指令將會安裝並執行 create-vue

npm init vue@latest

![image.png](

熟悉專案和關鍵檔案

![image.png](

組合式API - setup選項

1. setup選項的寫法和執行時機

寫法

<script>
  export default {
    setup(){
      
    },
    beforeCreate(){
      
    }
  }
</script>

執行時機

在beforeCreate鉤子之前執行

![image.png](

2. setup中寫程式碼的特點

在setup函式中寫的資料和方法需要在末尾以物件的方式return，才能給模版使用

<script>
  export default {
    setup(){
      const message = 'this is message'
      const logMessage = ()=>{
        console.log(message)
      }
      // 必須return才可以
      return {
        message,
        logMessage
      }
    }
  }
</script>

3.