Vue3|Vue3 优雅实现 useMap
前言
【Vue3|Vue3 优雅实现 useMap】Vue3
中我们常常需要用到很多 hook
工具库。
? 这章介绍如何优雅的实现 useMap
,开启高逼格之路。
欢迎大家使用体验高质量 vue3-hooks-plus
完美支持 ts
。
体验地址
实现原理
Map
对象大家一定都不陌生,那么我们在 Vue3
中如何很优雅的使用它呢?
1、首先,它得必须具备 Map
的
- 可传入初始值
- 增删查改
- 重置
- 清空
- 响应式
Vue3
当然要具备响应式啦!const initialMap = initialValue ? new Map(initialValue) : new Map()
const state = ref(initialMap) as Ref
如果有初始值贼赋值初始值,否则给予空 Map。这里就有小伙伴问了,
K
和 T
是啥玩意? 当然是支持 ts
了,还不会ts的小伙伴赶紧安排,这样使用vue3才能得心应手。3、 书写
ts
类型文件type MapValue = Iterable
?
type Actions = {
set: (key: K, value: T) => void
get: (key: K) => T | undefined
remove: (key: K) => void
has: (key: K) => boolean
clear: () => void
setAll: (newMap: MapValue) => void
reset: () => void
}
这里的 MapValue 初始值采用了内置 的 ES6 类型
Iterable
,并且初始值我们希望它是只可读的。K 和 T 分别代表 Map 的 键和值。4、书写hook
function useMap(initialValue?: MapValue) {
...
...
return [state, markRaw(actions)]
}
state 为 map 的对象,action为对map的操作行为。 markRaw防止其变成proxy对象。
源码
import { ref, Ref, markRaw } from 'vue'
?
type MapValue = Iterable
?
type Actions = {
set: (key: K, value: T) => void
get: (key: K) => T | undefined
remove: (key: K) => void
has: (key: K) => boolean
clear: () => void
setAll: (newMap: MapValue) => void
reset: () => void
}
?
function useMap(
initialValue?: MapValue
): [Ref
附言 ?? 加油,早日成为巨佬
推荐阅读
- Python CouchDB连接详细实现
- Java CouchDB连接详细实现步骤
- android一步一步实现视频clientapp
- 从0实现一个流程渲染引擎
- Android开发分享功能实现步骤
- Envoy熔断限流实践(一)基于Rainbond插件实现熔断
- 巧用Drawable 实现Android UI 元素间距效果
- 七朋元视界无限时消息撤回功能让你实现信息数据重塑
- android 4.4以上能够实现的沉浸式状态栏效果
- #|零基础K210实现人脸识别(YOLO2)