Vue 3.0 上手(三)is 系列研究(isRef、isProxy、isReactive、isReadonly)
source link: http://www.yukapril.com/2020/10/02/vue-3-3.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Vue 3.0 上手(三)is 系列研究(isRef、isProxy、isReactive、isReadonly)
继续接上。之前在未正式发布前,自己就尝试对 is 系列进行研究,结果后来升级后,发生了不少变化,就决定正式版再说了。9月中下旬终于发布正式版,自己在节前终于抽空,把这部分补上。
isRef、isProxy、isReactive、isReadonly
之前测试 beta 时候的结果,但是升级 rc 后,发现部分结果不对了…所以最新修订了一版。在发布 3.0.0 后,又测试了下,和 rc 是一致的。
说明,下文的 ref(reactive)
之类的含义:
1
2
3
4
5
6
7
const refType = ref(0)
const computedType = computed(() => true)
const reactiveType = reactive({ foo: 'bar' })
const readonlyType = readonly({})
// ref(reactive) 等效于 ref(reactiveType)
// 其他原理相同
把所有的情况,都列举如来,测试如下(不考虑 markRaw
情况):
对表格进行精简,如下:
type isRef isReactive isReadonly isProxy ref √ X X X * ref(computed) √ X √ √ * ref(reactive) √ X X X * ref(readonly) √ X X X computed(any) √ X √ √ reactive(any) X √ X √ readonly X X √ √ * readonly(ref) √ X √ √ * readonly(computed) √ X √ √ * readonly(reactive) X √ √ √isReactive
Checks if an object is a reactive proxy created by
reactive
.
- reactive 包裹的变量,一定是
- readonly 只是特殊处理下,所以看包裹内的变量
isReadonly
Checks if an object is a readonly proxy created by
readonly
.
- readonly 包裹的变量,一定是
- computed 也是只读,也一定是
- 还有就是一个特殊的,ref 包裹 computed,也是
isRef
Checks if a value is a ref object.
- computed 是特殊的 ref
- ref/computed 包裹的变量,一定是
- readonly 只是特殊处理下,所以看包裹内的变量
isProxy
Checks if an object is a proxy created by
reactive
orreadonly
.
- 只要是
isReactive
或isReadonly
的,就是 - 相当于
const isProxy = x => isReactive(x) || isReadonly(x)
computed
变量,就是特殊的ref
ref
变量,isRef
必定是true
reactive
变量,isReactive
必定是true
readonly
变量,isReadonly
必定是true
readonly
就是包裹一层而已,不会影响内层变量的isReactive
isRef
判断isProxy
是个方法集合,只要是isReactive
或isReadonly
的,isProxy
就是true
没有特殊需求,不要反复嵌套。直接用基本的 reactive
ref
基本类型就好。
isRef
isProxy
isReactive
isReadonly
感觉日常用不到,没想到具体的应用场景。
–END–
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK