Vue3小结

首先Vue3的脚手架工具是vite 创建项目：

npm init vite@latest

里面大部分跟vue2一样，如指令插值等等

setup！！！

setup是script标签的一个属性，如果设置了，script里面的方法数据等等都可以不用分开写了！！

ref和reactive

ref是vue3的语法糖可以修改数据，但是一般ref是修改基本数据类型，而reactive是修改引用数据类型。ref也可以修改是因为她内部自动调用了reactive。

Vue3通信

父向子传值

在父组件中找到子组件标签设置自定义属性名：要传递的数据，然后再子组件用defineProps来接收当data来使用

父组件：

子组件：

 

子向父传值

 首先在子组件标签里设置emit，并且emit里面有两个参数，一个是自定义方法名，一个是要传递的数据，然后再父组件里面时找到自组建标签接收自定义方法名=新的方法名，新的方法名里面有一个参数那个参数就是自组建传递的数据。

非父子传值

 首先安装mitt库（这个库就是解决非父子组件通信）然后再创建公共实例化对象bus

传递数据用bus.emit()里面还是有两个参数跟emit（）一样：

接收数据用bus.on()来接收  前提也要import引入一下bus.js文件

使用vue-router

首先安装vue-router

npm i vue-router

 然后创建router.js文件里面存放需要的路由配置

然后main.js里面use一下

 在主入口vue文件中 router-view标签就是自己的路由页面

vue-router里面还有路由跳转和路由信息 

首先路由跳转就是编程式导航，直接上代码

获取路由信息

 

还有状态工具pinia（安装 | Pinia 中文文档 (web3doc.top)）

首先安装

npm i pinia

然后创建一个stoer.js文件，跟vuex一样，但是里面有四个核心state，Getters，Actions，Plugins（插件）前三个跟vuex的那三个一样

使用：