Skip to content

docs: shallow unwrap on setup #851

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 9, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/guide/composition-api-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ If `setup` returns an object, the properties on the object can be accessed in th
</script>
```

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

Expand Down
19 changes: 17 additions & 2 deletions src/guide/reactivity-fundamentals.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<template>
<div>
<span>{{ count }}</span>
<button @click="count ++">Increment count</button>
<button @click="nested.count.value ++">Nested Increment count</button>
</div>
</template>

Expand All @@ -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
}
}
}
}
</script>
```

::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:
Expand Down