vue3知识点总结

67 阅读2分钟

1.常用Composition Api

1.setup函数

image.png image.png image.png image.png image.png

2.ref函数(基本类型和对象类型都行, 对象类型需要.value)

image.png

3.reactive函数(对象类型, 不需要.value)

image.png image.png image.png image.png

4.reactive和ref对比

image.png

5.Vue2响应式原理(数据劫持)和Vue3响应式原理

image.png image.png definedProperty: image.png vue2实现: image.png image.png proxy: image.png Reflect: (目前正在将Object对象的属性移植到reflect, 它能返回Boolean值, 易于捕获错误) image.png vue3实现: image.png

6.computed功能配置跟vue2一致

image.png

7.watch的功能与vue2一致

watch监视reactive数据 image.png image.png image.png watch监视ref数据 image.png

8.watchEffect函数

image.png image.png

9.生命周期(组合式钩子比配置项形式配置的钩子先执行)

image.png

10.自定义hook

image.png image.png image.png

11.toRef与toRefs

转成ref响应式 image.png image.png

2. 其他Composition Api

1.shallowReactive与shallowRef

image.png image.png

2.readonly与shallowReadonly

也可以是ref定义的;一般用于引用了别人的数据,并且在当前页面内不允许改 image.png image.png

3.toRaw与markRaw

比如不想改变的原始数据等 image.png image.png

4.customRef(自定义ref)

image.png image.png

5.provide与inject

实现祖孙组件间通信的 父级provider 子级inject获取 image.png image.png image.png

6.响应式数据判断

image.png image.png

3. Vue3 新的组件

1. Fragment

image.png

2. Teleport

样式也跟着to的层级去改变继承了 image.png image.png image.png image.png

3. Suspence加载优化

image.png

4. Vue3其他变化 具体参考vue迁移指南

1. 全局Api的转移

image.png image.png

2. data必须是函数了, 不能是对象形式了

image.png

3. 过度类 关于类名的更改

image.png

4. 移除keyCode作为v-on的修饰符

image.png

5. 不再支持config.keyCodes

image.png

6. 移除v-on.native修饰符

image.png

7. 移除filter

建议方法调用或者计算属性去代替

8. ...等等等了

5. 插件

1. unplugin-auto-import -D

解决问题: 在组件开发中无需每次都引入 import {ref, reactive ...} from,尤其是特别多的时候 但是ts的话还有一些配置需要去配,具体需要百度了 image.png

2. pinia-plugin-persist --save

解决问题: 持久化pinia

6. pinia

1. storeToRefs

响应式store中的数据

2. store.$patch

批量修改store中的数据的api image.png

3. getters和actions

image.png image.png

4. store.$reset

image.png

5. 分模块

image.png

6. 持久pinia

image.png image.png image.png

7. pinia区别于vuex的点
  1. 没有mutations, 只有state, action, getters
  2. 可以不用action直接修改state中的数据
  3. 模块化不需要modules去划分
  4. 更小轻量级