From 118502a4b88719645013c372532a9c413fcc58e7 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 23 Oct 2020 14:37:09 -0400 Subject: [PATCH] chore: comments [ci skip] --- packages/reactivity/src/reactive.ts | 44 ++++++++++++++++++++++++----- 1 file changed, 37 insertions(+), 7 deletions(-) diff --git a/packages/reactivity/src/reactive.ts b/packages/reactivity/src/reactive.ts index 3f6da836..cea41a19 100644 --- a/packages/reactivity/src/reactive.ts +++ b/packages/reactivity/src/reactive.ts @@ -59,6 +59,28 @@ function getTargetType(value: Target) { // only unwrap nested ref type UnwrapNestedRefs = T extends Ref ? T : UnwrapRef +/** + * Creates a reactive copy of the original object. + * + * The reactive conversion is "deep"—it affects all nested properties. In the + * ES2015 Proxy based implementation, the returned proxy is **not** equal to the + * original object. It is recommended to work exclusively with the reactive + * proxy and avoid relying on the original object. + * + * A reactive object also automatically unwraps refs contained in it, so you + * don't need to use `.value` when accessing and mutating their value: + * + * ```js + * const count = ref(0) + * const obj = reactive({ + * count + * }) + * + * obj.count++ + * obj.count // -> 1 + * count.value // -> 1 + * ``` + */ export function reactive(target: T): UnwrapNestedRefs export function reactive(target: object) { // if trying to observe a readonly proxy, return the readonly version. @@ -73,9 +95,11 @@ export function reactive(target: object) { ) } -// Return a reactive-copy of the original object, where only the root level -// properties are reactive, and does NOT unwrap refs nor recursively convert -// returned properties. +/** + * Return a shallowly-reactive copy of the original object, where only the root + * level properties are reactive. It also does not auto-unwrap refs (even at the + * root level). + */ export function shallowReactive(target: T): T { return createReactiveObject( target, @@ -107,6 +131,10 @@ export type DeepReadonly = T extends Builtin ? { readonly [K in keyof T]: DeepReadonly } : Readonly +/** + * Creates a readonly copy of the original object. Note the returned copy is not + * made reactive, but `readonly` can be called on an already reactive object. + */ export function readonly( target: T ): DeepReadonly> { @@ -118,10 +146,12 @@ export function readonly( ) } -// Return a reactive-copy of the original object, where only the root level -// properties are readonly, and does NOT unwrap refs nor recursively convert -// returned properties. -// This is used for creating the props proxy object for stateful components. +/** + * Returns a reactive-copy of the original object, where only the root level + * properties are readonly, and does NOT unwrap refs nor recursively convert + * returned properties. + * This is used for creating the props proxy object for stateful components. + */ export function shallowReadonly( target: T ): Readonly<{ [K in keyof T]: UnwrapNestedRefs }> {