全套笔记资料代码移步： 前往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.