首先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的那三个一样
使用: