前言
一直用的vue2写的。一直没有接触过vue3没有机会使用工作中
自己又比较懒，一直拖着没学，因为感觉学了不用，过段时间我就忘得差不多了。
这次刚好公司有了这个vue3的项目，我就来学习一波，然后实战练练刚好记得牢一点。
中途遇到的各种问题和我学习到的一些vue3的语法等。就在这里记录下来学习笔记。
方便自己忘了来看看，一直保持更新！！
创建项目
vue在推出vue3后新推出了一个脚手架工具，叫create-vue，【注意node版本16以上才行，不然可能会报错】
操作步骤：
第一步：生成项目
在终端里也就是命令行cmd中输入：
npm init vue@latest
然后会出现这个，你就直接回车
然后开始创建项目，以前的vue脚手架是你一个个选，现在是简单的yes和no，每一行的意思下面有
翻译：可以参考蓝色的来选择配置，
npm init vue@latest时可能会发生的报错，我遇到的
解决办法：这种情况就是你的npm镜像问题，比如你刚刚更新了npm之类的，就会这种情况，解决步骤如下：
1，查看 你的镜像地址
npm config get registry
2，将你的镜像设置为淘宝镜像
npm config set registry https://registry.npm.taobao.org
3，从新执行一遍 npm init vue@latest
第二步：安装依赖
跟以前不一样的是以前直接给我们安装好了依赖，也就是那个node_modules那个文件夹，这里需要自己再安装一下。
进入你生成的项目文件夹目录然后 输入命令：
有淘宝镜像的建议cnpm i更快
npm i
第三步：运行
不得不说vite运行是真的快啊。一秒搞定太爽了
npm run dev
注意：这里运行就是根据vue3的 vite 来运行了， 不是以前的webpack了。所以速度很快。但是有可能你会提醒报错vite不是内外部指令这种的。
原因就是你没有安装vite。输入下面的指令安装一下，如果还不行就npm i从新安装一下，终端重启一下
npm install -g create-vite
vscode插件使用
输入volar 选择图中的这个语法帮主的插件。可以帮你更方便写vue3的语法，有提示
整体结构
上面html标签，现在vue3有个变化，可以根标签写多个了，也就是以前template内只能有一个根标签，我们都是用一个div套着。现在可以多个div也没事了。
然后业务代码直接写在script内部。其实类似js的原生写法了。
因为有语法糖setup直接写在script上面里面就不需要再去写setup函数包着了。
组件引入
比如现在我们需要父组件引入一个子组件。我们不需要再去和vue2一样import引入后用components注册组件了。
我们直接import引入，因为在setup包裹内，会自动转成我们的组件。可以直接使用，像我图中圈出来的那样，不需要注册了。
变量声明
简单描述：
复杂数据比如数组对象之类的用reactive
基础数据比如字符串和数字布尔值用ref
只读的不想修改的数据用readonly (注意不是响应式的)
当然你要是闲麻烦，偷懒也可以全部写在一个大的对象内，就像以前的data一样了。 - -！
函数声明
注意点就是ref和reactive的操作区别
计算属性
监听器
副作用函数
简单理解：类似于监听器，内部多个变量可以同时监听，一旦有一个变了就会执行
注意：要引入这个函数才行，不然不生效。还有内部如果监听的是ref的值，要监听变量的value
pinia（vue3新出的和vuex一样功能的状态管理工具）
和vuex区别：使用起来更方便了，里面使用的是组合式api。不再需要想vuex一样定义state，action，mutations之类的了。
页面上使用方法：
很简单，就是引入模块，然后找个变量保存一下，然后就直接使用就完事了
【注意】直接countStore.xxx使用没问题，但是如果我们想解构出countStore里面的内容，就会破坏响应性。
解决办法：我们需要通过 storeToRefs方法包住countStore就可以解构出响应式的数据了
import {
storeToRefs } from 'pinia'
const countStore = useCounterStore()
const {
name, doubleCount } = storeToRefs(countStore)
pinia持久化插件
持久化是什么意思：简单说就是当你保存到pinia状态管理里面的数据会自动同步保存到本地，你刷新也不会把pinia会刷新掉，除非你删除本地的数据，而刷新的时候pinia会优先获取本地的数据
官网文档：本插件兼容 pinia^2.0.0
https://prazdevs.github.io/pinia-plugin-persistedstate/zh/
安装方法：
1，安装依赖
npm i pinia-plugin-persistedstate
2，在main.js中注册到pinia上。注意是注册到pinia上不是注册到app上了
如果是pinia注册到app上。那就这么写app.use(pinia.use(piniaPluginPersistedstate))
import {
createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
3，多个模块，如何选择某个模块持久化，只需要在对应模块内的defineStore函数第三个参数放一个persist参数就行了
4，其他配置可以参考官网文档中的配置
这里可以配置的项目举几个例子：
1，传到本地保存的名字
2，只让某几个数据持久化
3，保存到本地是存到localStorage或者sessionStorage里
4，配置序列化方法就是JSON.stringify/JSON.parse这些
pinia封装方法
为什么要封装呢，解决两个问题
1，目前是在main.js里面导入的pinia，封装可以让main.js少一些代码，更加简介
2，我们以后会有很多个的模块，当我们每个页面使用的时候都需要每个模块引入一次，这非常不方便。我们希望的是只引入一个文件，然后可以把多个模块都导出来。免得我们写多个路径说不定就写错了。所以这里就弄一个主入口文件，然后把这个文件到处pinia实例到main.js中注册就可以了。
封装代码
import {
createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
// pinia实例
const pinia = createPinia()
// 注册持久化插件
pinia.use(persist)
// 到处pinia实例
export default pinia
// 这种写法意思就是：导出modules内的模块，相当于vue2的把vuex模块都汇总到一个总的文件入口。
// 这样就可以直接访问这一个文件拿到各个模块的内容,这个星号就代表模块内所有暴露出来的值全部导出
export * from './modules/count'
export * from './modules/counter'
main.js里面 导入 注册一下
然后页面上使用就可以这样导入
import {
useCountStore,useCounterStore} from '@/stores'
父子组件传值
总体来说跟vue2的父子传值区别不是很大，就是换了一个接受发送方式，逻辑还是一样的。
【父组件】
【子组件】
子组件的代码，方便复制贴出来
<template>
<div class="greetings">
<!-- 父组件传过来的值，子组件使用 -->
<h1>{
{
info }}</h1>
<!-- 点击子组件按钮传值给父组件 -->
<button @click="clickChild">子组件传给父组件</button>
</div>
</template>
<script setup>
import {
toRefs, defineProps,defineEmits,ref,reactive } from 'vue'
// 【子接收父级参数========================================================】
const props = defineProps({
//子组件接收父组件传递过来的值
info: String,
})
//【子传父---------------------------------------------------------】
// 使用defineEmits创建名称，接受一个数组,里面是父组件的自定义方法名
const emit=defineEmits(['clickChild'])
function clickChild(){
let param={
content:'b'
}
//传递给父组件
emit('clickChild',param)
}
// 【父获取子级的属性值=============================================】
const sex=ref('男')
const obj=reactive({
name:'小方',
age:18
})
// 通过这个方法把变量抛出去，记得要引入这个方法
defineExpose({
sex, obj})
</script>
provide和inject跨层级传递数据(不光是父子传，可以爷孙传，或者更多层级的传递数据)
生命周期
vue3的生命周期变化不是很大。
看下图对比，总结一下，简单来说就是：
1，以前的beforeCreate和created都删除了，因为现在在setup语法糖里面一进入就可以直接调用执行，调用方法就是js的调用函数的方法，直接 函数()就可以了，所以不需要上面两个生命周期了。
2，【beforeMount】和【mounted】和【beforeUpdate】和【updated】四个生命周期就是简单的在前面加了个on就完事了。没啥变化。
3，以前用于销毁的生命周期现在变了，注意看图。
【声明周期使用方法】展示：
【注意】生命周期需要引入，不引入是不行的
这里再说明一点，这个生命周期函数是可以写多个的，不会冲突。
但是会按照顺序执行，也就是相同的生命周期写在上面的先执行。
获取dom方法
defineOptions（组件命名，页面配置之类的写在这里面）
因为用了setup语法糖，所以没有办法写一些平级的属性，所以要写在这个api里面就可以了。
路由跳转和参数获得(router)
vue3的路由和vue2的路由差别不大。但是由于vue3没有了this。
所以这里vue3新给了一个方法，如下图中的 useRouter 和 useRoute
然后其他的操作和vue2一样，只是从以前的this.$router拿路由对象，变成现在通过新方法拿到对象。
这是路由对象useRouter拿到的路由对象
这是路由对象useRoute拿到的路由参数
路由配置
基本没变化，区别就是路由模式的写法
这个import.meta.env.BASE_URL代表了基础路径，这里是可以改的。当然我们肯定不会把这个写死。一般会配置一下。
配置的位置如下图。因为这个是vite中的环境变量。所以我们可以去vite中配置一个基础路径
新项目创建后没有这个基础路径的，自己加一个就行了。
更多的环境变量可以参考vite官方文档
点击跳转vite官网文档
element Plus引入方法
安装步骤：
1，安装依赖
选择一个你喜欢的包管理器
NPM
$ npm install element-plus --save
Yarn
$ yarn add element-plus
pnpm
$ pnpm install element-plus
2，导入(这里区分两种，一种是完整导入，一种是按需导入，推荐是使用按需导入性能更好)
第一种方法：完整导入，在main.js中引入这个(不推荐)
// 引入文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 注册
app.use(ElementPlus)
第二种方法：按需导入（推荐！推荐！因为现在版本的按需引入和完整引入使用体验完全一样，不需要你再去每个页面引入组件或者注册了，插件会自动帮你引入，你啥也不用管，就跟完整引入一样直接使用就行了）
1，首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
输入这个命令安装插件，这是自动按需加载和注册的插件
npm install -D unplugin-vue-components unplugin-auto-import
2，去vite.config.js中添加如下配置
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
添加完之后是这样的
【注意】配置修改后重启一下项目生效！
这里说一个插件得小彩蛋：
当你安装了这个插件后，比如你在components内写了一个组件，然后你需要在页面上使用这个组件，你可以不引入直接使用
element Plus 组件默认英文 全局转中文
因为组件中有很多比如日期这样的组件，里面是默认显示的英文的，但是我们很多时候是需要中文的。
解决办法：分两种
方法1：全局导入element-plus使用
在main.js中
import ElementPlus from 'element-plus';
import locale from "element-plus/lib/locale/lang/zh-cn";//需要新加的代码
const app = createApp(App);
app.use(ElementPlus, {
locale});//需要改变的地方，加入locale
方法2：按需引入element-plus库
在app.vue中包裹住视图就可以把所有组件都汉化了
<template>
<div>
<!-- 这个是汉化组件，包裹住视图 -->
<el-config-provider :locale="locale">
<router-view></router-view>
</el-config-provider>
</div>
</template>
<script setup>
import {
reactive } from "vue";
import zhCN from "element-plus/dist/locale/zh-cn.mjs";//引入中文汉化
const {
locale } = reactive({
locale: zhCN,
});
</script>
看看效果，可以了
【注意】这里可能会报这个错
原因是引入的这个汉化跟你的elementPlus版本冲突
No known conditions for "./lib/locale/lang/zh-cn" specifier in "element-plus" package
如果发生这种情况，下面两种引入方式，都试一下，哪个可以使用就用哪个
import zhCN from "element-plus/dist/locale/zh-cn.mjs";
import zhCN from 'element-plus/lib/locale/lang/zh-cn';