1.常用Composition Api
1.setup函数
2.ref函数(基本类型和对象类型都行, 对象类型需要.value)
3.reactive函数(对象类型, 不需要.value)
4.reactive和ref对比
5.Vue2响应式原理(数据劫持)和Vue3响应式原理
definedProperty:
vue2实现:
proxy:
Reflect: (目前正在将Object对象的属性移植到reflect, 它能返回Boolean值, 易于捕获错误)
vue3实现:
6.computed功能配置跟vue2一致
7.watch的功能与vue2一致
watch监视reactive数据
watch监视ref数据
8.watchEffect函数
9.生命周期(组合式钩子比配置项形式配置的钩子先执行)
10.自定义hook
11.toRef与toRefs
转成ref响应式
2. 其他Composition Api
1.shallowReactive与shallowRef
2.readonly与shallowReadonly
也可以是ref定义的;一般用于引用了别人的数据,并且在当前页面内不允许改
3.toRaw与markRaw
比如不想改变的原始数据等
4.customRef(自定义ref)
5.provide与inject
实现祖孙组件间通信的
父级provider 子级inject获取
6.响应式数据判断
3. Vue3 新的组件
1. Fragment
2. Teleport
样式也跟着to的层级去改变继承了
3. Suspence加载优化
4. Vue3其他变化 具体参考vue迁移指南
1. 全局Api的转移
2. data必须是函数了, 不能是对象形式了
3. 过度类 关于类名的更改
4. 移除keyCode作为v-on的修饰符
5. 不再支持config.keyCodes
6. 移除v-on.native修饰符
7. 移除filter
建议方法调用或者计算属性去代替
8. ...等等等了
5. 插件
1. unplugin-auto-import -D
解决问题: 在组件开发中无需每次都引入 import {ref, reactive ...} from,尤其是特别多的时候
但是ts的话还有一些配置需要去配,具体需要百度了
2. pinia-plugin-persist --save
解决问题: 持久化pinia
6. pinia
1. storeToRefs
响应式store中的数据
2. store.$patch
批量修改store中的数据的api
3. getters和actions
4. store.$reset
5. 分模块
6. 持久pinia
7. pinia区别于vuex的点
- 没有mutations, 只有state, action, getters
- 可以不用action直接修改state中的数据
- 模块化不需要modules去划分
- 更小轻量级