一、vue3简介
1.官网地址：https://vuejs.org/ 中文官网 https://cn.vuejs.org/
2.vue2已经于2023年12月31日停止维护。建议升级到vue.js3.0版本。打包更小，内存更小，渲染更快，并且vue3向下兼容vue2语法。
3.vue3于2020年9月18日发布，代号：one piece 海贼王。
4.vue3新特性：组合式API（重点），更好的支持TypeScript（熟悉），状态存储框架pinia(重点)，新组件(了解)等
二、脚手架
前置：安装NodeJs（18.0版本以上）https://nodejs.org/en
# 使用官方脚手架Vite创建vue工程
npm create vue@latest
#按照脚手架要求选择是否启用相关组件
1.所有的功能都可以后续手动添加。
关于TypeScript，在vue中的TypeScript可以认为是在JS的基础上，增加面向对象的能力。可以定义接口、类、抽象类等。
2.npm install 过程中会去node仓库下载很多依赖库，放到项目本地node_modules目录。建议将npm源设定为淘宝提供的国内镜像，可以下载快一点。
npm config get registry https://registry.npmmirror.com
3.vue2时提供了另外一个脚手架vue-cli，也可以用来创建vue3项目，但是vue-cli已经处于停止维护的状态。
三、工程结构
1.典型的vue项目，都是在index.html这一个单页面里形成各种交互，即SPA（single Page Application）
2.vue3的核心是通过createApp函数创建一个应用实例，在这个实例中构建各种应用（main.ts中）
3.vue2中要求<template>下必须有一个唯一的根元素，Vue3没有限制.
四、数据双向绑定
1.双向绑定是Vue最为核心的功能。简单理解就是<template>中的页面数据和<script>中的脚本数据进行绑定，其中任何一个数据发生了变化，另一个数据也随之发生变化。
2、OptionsAPl和CompositionAPl
Vue2中常用的这种编写方式称为OptionsAPI，配置式。其实现方式是用一个统一的配置对象来实现全部代码逻辑。在这个对象中，通过data、methods、computed等配置选项来控制逻辑。
OptionsAPI是Vue2时的标准API编写方式。Vue3向下兼容了Vue2的API。因此，Vue2的老项目，在Vue3中基本可以无缝迁移。实际上，optionsAPI是在compositionAPI的基础上实现的。关于vue的基础概念和知识，在这两种API之间是通用的 。另外，官方建议，如果采用Vue构建完整的SPA应用，那么更建议使用CompositionAPI。但是，OptionsAP!所有逻辑都混在一起，不便于维护和复用。Vue3另外通过了一种更方便的APl，CompositionAPI，混合式API。
四、VUE3生命周期
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发定阶段运行自己的代码。
生命周期有四个阶段:创建，挂载，更新，销毁。每个阶段有一前一后两个函数
1.OptionsAPI的生命周期函数:
创建阶段:beforecreate、created
挂载阶段:beforeMount、mounted
更新阶段:beforeupdate、updated
销毁阶段:beforepestroy、destroyed
2.CompositionAPl的生命周期函数:
创建阶段:setup
挂载阶段:onBeforeMount、onMounted
更新阶段:onBeforeUpdate、onUpdated
卸载阶段:onBeforeUnmount、onUnmounted
五、Pinia集中式状态存储
1、理解状态
在任意Vue页面之间共享的存储数据。简单理解:在当前Vue项目中使用的MySQL数据库。例如登录信息，只要完成了登录，所有Vūe贝面都能读取到当前登录用户。
Vue2中提供的集中状态存储框架是Vuex，Vue3中新提供了Pinia。如果你使用的还是Vue2，那么主要下，Vuex和Pinia不能一起使用。
2、创建store
Pinia可以在创建应用时选择引入。如果创建时没有引入，那就需要手动引入一下。
npm install pinia
Pinia的使用方式和Route组件基本相似。需要在启动的ts文件中使用use函数引入。
import {createpinia}from 'pinia'
//加载pinia
const pinia= createpinia()
app.use(pinia)
接下来使用pinia需要创建Store。一个Store可以理解为MySOL种的一个库，保存一部分数据。Pinia的Store中有三个概念: state,getter,action。这三个概念也可以类比于熟悉的MVC。state相当于是数据;getter相当于是服务，用来获取并返回数据;action相当于是Controller，组织业务逻辑。
六、UI框架
Ant Design Vue(https://www,antdv,com/docs/vue/getting:started-cn) 经典老框架
Native Ul(https://www,naiveui.com/zh-CN/light)仅支持Vue3的一个新的UI库。
Tdesign(https://tdesign,tencent.com/) 腾讯开源的前端U!框架 包含桌面与移动端
NutUl(https://nutui.jd.com/#/) 京东开源的前端U!框架。
uvuewui(https://www,uviewui.com/)适合移动端uni-app开发