全套筆記資料代碼移步： 前往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.