一、 Vue3与Vite构建工具简介
Vite构建工具（其他的打包工具有webpack，grunt，gulp）
二、创建Vue3项目
- vite在TypeScript结合使用上，直接开箱即用，不需要额外配置。
-
Vue3语法兼容Vue2语法。Vue3的setup与Vue2的data、methods可以同时存在使用，但是不建议这样操作，优先使用setup组合式返回值。setup是先于beforeCreate、data等钩子执行的，所以在data中可以通过this读取出setup返回值，反之不可。
构建1
依赖添加异常，需要检查网络或代理时，尝试使用国内镜像源，这里经常会有小坑，更换为国内镜像源以提高稳定性：
1使用淘宝镜像：
npm config set registry https://registry.npmmirror.com
2.使用腾讯镜像：
npm config set registry https://mirrors.cloud.tencent.com/npm/
3.使用华为镜像：
npm config set registry https://repo.huaweicloud.com/repository/npm/
4.检查当前镜像源：
npm config get registry
三、Vue2与Vue3项目api区别
- Vue2使用选项式Api，Vue3使用组合式Api
-
template内，Vue3可以不需要根节点，Vue2必须包含唯一一个根节点。
vue2
hook组合式封装，发挥了Vue3组件化开发的魅力。
四、ref与reactive响应式
-
基本类型的响应式数据，只能使用ref
-
对象类型的响应式数据
1.reactive方式，只能定义对象类型。在setup中只需要取出使用即可，如car.price=200触发响应式和赋值。
2.ref处理对象类型响应式，底层使用的还是reactive
-
ref和reactive区别
分配不同对象时，对于ref只需要car.value=新对象，而对于reactive需要借助Object.assign(被替换对象，新对象1，新对象2...)
car.value=ref({brand:'五菱',price:50})替换赋值生成一个新对象
Object.assign(car,{brand:'五菱',price:50})对象内属性一一对应覆盖，还是原来的对象
-
toRefs与 toRef 使用
作用：将一个响应式对象中的每一个属性，转换为ref 对象
备注:：toRefs与 toRef 功能一致，但 toRefs 可以批量转换整个对象，toRef只能转指定值。结构体name修改，person内对应的属性值也会响应式变化。
-
响应式对象取值特殊情况
五、计算属性
引入import { reactive,ref, toRef, toRefs,computed } from 'vue'
同样使用的时候通过computed 包裹要计算的内容函数
六、watch属性
-
1.监视 ref 定义的【基本类型】数据：直接写数据名即可，监视的是其 value 值的改变。调用这个函数可以终止监听，比如函数名stopwatch()
-
2.监视对象：监视ref对象。
不管是ref还是reactive监视一整个对象时而不是某个非对象属性，则只要外围对象没有生成新的对象赋值，则newValue、oldValue都是指向新值。虽然对象内属性改动变化了，但是对象还是那个对象，对象地址值不变。
-
3.监视对象：监视reactive对象。
reactive只能定义对象，所以只能监视整个对象，这个模式默认开启深度监视，且无法关闭。深度监视开启后，就可以监视对象内的某个任意属性变化。
-
4.侦听对象内的某个特定属性，其他属性不监视
对象子属性：基本类型属性
对象子属性：对象类型属性。手动开启深度监视。
-
5.侦听多个属性，写成数组形式
七、watchEffect属性
八、标签节点的ref属性
九、组件传参：defineProps属性
defineProps接收组件传递的参数。defineXXX都不需要直接引用，是属于宏函数。
十、Vue3生命周期
- setup函数替代了Vue2中beforeCreate、created生命周期。
-
程序解析到子组件时，子组件的可执行的生命周期全部经历后，才会继续执行父组件剩余生命周期。
image.png
十一、Vue3的Hooks
Hooks的使用替换了Vue2中mixin的使用，是实现组合式API开发的关键。可以在创建的Hooks的useXXX文件函数里面封装你的代码，也可以使用生命周期钩子函数。合理的封装你的功能模块。
十二、Vue3的路由
-
Vue3和Vue2路由使用基本相同。
-
路由器工作模式
-
路由传参
1.query传参，两种写法方式。字符串写法和对象写法。
2.params传参，也是有两种写法方式。字符串写法和对象写法。但是注意这时候，只能使用name路由路径写法。注意，这种写法不可以传递对象和数组。
路由配置props:true，所有路由器接收参数都转换为组件属性
路由配置props其他写法
3.编程式路由器userRouter使用，RouterLink标签可以用的api属性userRouter也可以用
4.重定向路由导航redirect使用。可用于程序初始化页面显示的组件内容。
十三、Vuex状态管理升级为Vue3的Pinia
-
下载、安装、初始化
image.png
npm i pinia 安装下载
-
存储和读取数据
image.png
- pinia内容值修改的方式。修改就是vuex里的actions+mutations（相当于setters）。
// 数据
let select=ref(1)// 用户选择的数字
// 方法
function xiugai(){
// 第一种对源数据直接修改方式，直接操作三次
countstore.sum += 1
countstore.school= '黑马培训'
countstore.address= '深圳'
// 第二种patch修改方式，一次数据操作
countstore.$patch(
{
sum:888，
school:'尚硅谷，
address:'北京
})
// 第三种actions修改方式，抽离共同修改，复用多
countstore.increment(select.value)
}
-
pinia的storeToRefs响应式数据使用。storeToRefs只会关注sotre中数据，不会对方法进行ref包裹。
image.png -
pinia的getters
image.png
-
pinia订阅监听数据变化。在组件使用到的地方订阅。
image.png -
pinia选项式写法和组合式写法
选项式写法
十四、组件间通信方式
-
1.props传参方式通信（使用频率高）
image.png
-
2.emit自定义事件通信（使用频率高）
image.png -
3.mitt全局事件通信（使用频率高）。类似vue2全局事件总线。mitt可以实现任意组件间通信。
注意在onUnmounted组件销毁时卸载绑定的事件，调用emitter.off('事件名')解绑，节省资源。
image.png
-
4.v-model通信。
实现双向绑定的原理
image.png
封装一个双向绑定username值的v-model组件功能，实现父与子组件（input类型）的双向通信。在子组件呈现父组件传递过来的modelValue参数，并且给父组件发送自定义事件，将值回传赋值给username。
-
5.attrs实现爷爷组件向孙子组件通信。儿子组件需要设置attrs绑定。
image.png
- 6.
parent实现组件通信。
image.png
-
7.provide与inject实现组件通信。provide祖向孙通信，inject接收注册。
image.png
十四、插槽slot。也是组件件通信的一种方式，多用于ui构建。
-
默认插槽。名称默认是<slot name='default' >
-
具名插槽。v-slot='abc'可以简写为#abc
-
作用域插槽。
数据在子那边，但根据数据生成的结构，却由父亲决定。
如：压岁钱在孩子那，但根据压岁钱买的东西，却由父亲决定。
十五、响应式数据其他api补充
-
浅层次响应式：浅层次双向绑定响应式shallowRef、shallowReactive
-
单向只读响应式readOnly(深层次)、shallowReadOnly（浅层次）
-
toRaw与martRaw
toRaw对响应式数据剥壳，得到无响应式功能的原始数据对象，多用于传参的时候
markRaw永久性的设置为原始数据对象
-
自定义Ref，customRef。
实现Ref响应式功能
customRef：在原生Ref功能上加上自己的处理逻辑
如实现一个延时更新的Ref，封装成hooks
十六、Teleport使用
喜欢的朋友记得点赞、收藏、关注哦！！！
