diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index 5db7d0eb5b..de8facfb4c 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -142,7 +142,7 @@ If `setup` returns an object, the properties on the object can be accessed in th ``` -Note that [refs](../api/refs-api.html#ref) returned from `setup` are [automatically unwrapped](/guide/reactivity-fundamentals.html#ref-unwrapping) when accessed in the template so you shouldn't use `.value` in templates. +Note that [refs](../api/refs-api.html#ref) returned from `setup` are [automatically shallow unwrapped](/guide/reactivity-fundamentals.html#ref-unwrapping) when accessed in the template so you shouldn't use `.value` in templates. ## Usage with Render Functions diff --git a/src/guide/reactivity-fundamentals.md b/src/guide/reactivity-fundamentals.md index b2a440b165..00c808bb5e 100644 --- a/src/guide/reactivity-fundamentals.md +++ b/src/guide/reactivity-fundamentals.md @@ -45,13 +45,14 @@ console.log(count.value) // 1 ### Ref Unwrapping -When a ref is returned as a property on the render context (the object returned from [setup()](composition-api-setup.html)) and accessed in the template, it automatically unwraps to the inner value. There is no need to append `.value` in the template: +When a ref is returned as a property on the render context (the object returned from [setup()](composition-api-setup.html)) and accessed in the template, it automatically shallow unwraps the inner value. Only the nested ref will require `.value` in the template: ```vue-html @@ -61,13 +62,27 @@ When a ref is returned as a property on the render context (the object returned setup() { const count = ref(0) return { - count + count, + + nested: { + count + } } } } ``` +::tip + If you don't need to access the actual object instance, you can wrap it in a reactive: + + ```js + rested: reactive({ + count + }) + ``` +:: + ### Access in Reactive Objects When a `ref` is accessed or mutated as a property of a reactive object, it automatically unwraps to the inner value so it behaves like a normal property: