Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(reactivity): add isShallow api
  • Loading branch information
yyx990803 committed Jan 18, 2022
1 parent 0c06c74 commit 9fda941
Show file tree
Hide file tree
Showing 9 changed files with 39 additions and 15 deletions.
5 changes: 5 additions & 0 deletions packages/reactivity/__tests__/ref.spec.ts
Expand Up @@ -10,6 +10,7 @@ import {
} from '../src/index'
import { computed } from '@vue/runtime-dom'
import { shallowRef, unref, customRef, triggerRef } from '../src/ref'
import { isShallow } from '../src/reactive'

describe('reactivity/ref', () => {
it('should hold a value', () => {
Expand Down Expand Up @@ -227,6 +228,10 @@ describe('reactivity/ref', () => {
expect(dummy).toBe(2)
})

test('shallowRef isShallow', () => {
expect(isShallow(shallowRef({ a: 1 }))).toBe(true)
})

test('isRef', () => {
expect(isRef(ref(1))).toBe(true)
expect(isRef(computed(() => 1))).toBe(true)
Expand Down
13 changes: 12 additions & 1 deletion packages/reactivity/__tests__/shallowReactive.spec.ts
@@ -1,4 +1,10 @@
import { isReactive, reactive, shallowReactive } from '../src/reactive'
import {
isReactive,
isShallow,
reactive,
shallowReactive,
shallowReadonly
} from '../src/reactive'

import { effect } from '../src/effect'

Expand All @@ -24,6 +30,11 @@ describe('shallowReactive', () => {
expect(isReactive(reactiveProxy.foo)).toBe(true)
})

test('isShallow', () => {
expect(isShallow(shallowReactive({}))).toBe(true)
expect(isShallow(shallowReadonly({}))).toBe(true)
})

describe('collections', () => {
test('should be reactive', () => {
const shallowSet = shallowReactive(new Set())
Expand Down
2 changes: 2 additions & 0 deletions packages/reactivity/src/baseHandlers.ts
Expand Up @@ -84,6 +84,8 @@ function createGetter(isReadonly = false, shallow = false) {
return !isReadonly
} else if (key === ReactiveFlags.IS_READONLY) {
return isReadonly
} else if (key === ReactiveFlags.IS_SHALLOW) {
return shallow
} else if (
key === ReactiveFlags.RAW &&
receiver ===
Expand Down
1 change: 1 addition & 0 deletions packages/reactivity/src/index.ts
Expand Up @@ -22,6 +22,7 @@ export {
readonly,
isReactive,
isReadonly,
isShallow,
isProxy,
shallowReactive,
shallowReadonly,
Expand Down
8 changes: 7 additions & 1 deletion packages/reactivity/src/reactive.ts
Expand Up @@ -17,13 +17,15 @@ export const enum ReactiveFlags {
SKIP = '__v_skip',
IS_REACTIVE = '__v_isReactive',
IS_READONLY = '__v_isReadonly',
IS_SHALLOW = '__v_isShallow',
RAW = '__v_raw'
}

export interface Target {
[ReactiveFlags.SKIP]?: boolean
[ReactiveFlags.IS_REACTIVE]?: boolean
[ReactiveFlags.IS_READONLY]?: boolean
[ReactiveFlags.IS_SHALLOW]?: boolean
[ReactiveFlags.RAW]?: any
}

Expand Down Expand Up @@ -87,7 +89,7 @@ export type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>
export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
export function reactive(target: object) {
// if trying to observe a readonly proxy, return the readonly version.
if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
if (isReadonly(target)) {
return target
}
return createReactiveObject(
Expand Down Expand Up @@ -226,6 +228,10 @@ export function isReadonly(value: unknown): boolean {
return !!(value && (value as Target)[ReactiveFlags.IS_READONLY])
}

export function isShallow(value: unknown): boolean {
return !!(value && (value as Target)[ReactiveFlags.IS_SHALLOW])
}

export function isProxy(value: unknown): boolean {
return isReactive(value) || isReadonly(value)
}
Expand Down
14 changes: 5 additions & 9 deletions packages/reactivity/src/ref.ts
Expand Up @@ -16,10 +16,6 @@ export interface Ref<T = any> {
* autocomplete, so we use a private Symbol instead.
*/
[RefSymbol]: true
/**
* @internal
*/
_shallow?: boolean
}

type RefBase<T> = {
Expand Down Expand Up @@ -102,9 +98,9 @@ class RefImpl<T> {
public dep?: Dep = undefined
public readonly __v_isRef = true

constructor(value: T, public readonly _shallow: boolean) {
this._rawValue = _shallow ? value : toRaw(value)
this._value = _shallow ? value : toReactive(value)
constructor(value: T, public readonly __v_isShallow: boolean) {
this._rawValue = __v_isShallow ? value : toRaw(value)
this._value = __v_isShallow ? value : toReactive(value)
}

get value() {
Expand All @@ -113,10 +109,10 @@ class RefImpl<T> {
}

set value(newVal) {
newVal = this._shallow ? newVal : toRaw(newVal)
newVal = this.__v_isShallow ? newVal : toRaw(newVal)
if (hasChanged(newVal, this._rawValue)) {
this._rawValue = newVal
this._value = this._shallow ? newVal : toReactive(newVal)
this._value = this.__v_isShallow ? newVal : toReactive(newVal)
triggerRefValue(this, newVal)
}
}
Expand Down
3 changes: 2 additions & 1 deletion packages/runtime-core/src/apiWatch.ts
@@ -1,5 +1,6 @@
import {
isRef,
isShallow,
Ref,
ComputedRef,
ReactiveEffect,
Expand Down Expand Up @@ -205,7 +206,7 @@ function doWatch(

if (isRef(source)) {
getter = () => source.value
forceTrigger = !!source._shallow
forceTrigger = isShallow(source)
} else if (isReactive(source)) {
getter = () => source
deep = true
Expand Down
7 changes: 4 additions & 3 deletions packages/runtime-core/src/customFormatter.ts
@@ -1,5 +1,6 @@
import { isReactive, isReadonly, isRef, Ref, toRaw } from '@vue/reactivity'
import { EMPTY_OBJ, extend, isArray, isFunction, isObject } from '@vue/shared'
import { isShallow } from '../../reactivity/src/reactive'
import { ComponentInternalInstance, ComponentOptions } from './component'
import { ComponentPublicInstance } from './componentPublicInstance'

Expand Down Expand Up @@ -38,7 +39,7 @@ export function initCustomFormatter() {
return [
'div',
{},
['span', vueStyle, 'Reactive'],
['span', vueStyle, isShallow(obj) ? 'ShallowReactive' : 'Reactive'],
'<',
formatValue(obj),
`>${isReadonly(obj) ? ` (readonly)` : ``}`
Expand All @@ -47,7 +48,7 @@ export function initCustomFormatter() {
return [
'div',
{},
['span', vueStyle, 'Readonly'],
['span', vueStyle, isShallow(obj) ? 'ShallowReadonly' : 'Readonly'],
'<',
formatValue(obj),
'>'
Expand Down Expand Up @@ -181,7 +182,7 @@ export function initCustomFormatter() {
}

function genRefFlag(v: Ref) {
if (v._shallow) {
if (isShallow(v)) {
return `ShallowRef`
}
if ((v as any).effect) {
Expand Down
1 change: 1 addition & 0 deletions packages/runtime-core/src/index.ts
Expand Up @@ -15,6 +15,7 @@ export {
isProxy,
isReactive,
isReadonly,
isShallow,
// advanced
customRef,
triggerRef,
Expand Down

0 comments on commit 9fda941

Please sign in to comment.