Skip to content

toReactive

Category
Export Size
269 B
Last Changed
5 months ago

Converts ref to reactive. Also made possible to create a "swapable" reactive object.

Usage

ts
import { 
toReactive
} from '@vueuse/core'
import {
ref
} from 'vue'
const
refState
=
ref
({
foo
: 'bar' })
console
.
log
(
refState
.
value
.
foo
) // => 'bar'
const
state
=
toReactive
(
refState
) // <--
console
.
log
(
state
.
foo
) // => 'bar'
refState
.
value
= {
bar
: 'foo' }
console
.
log
(
state
.
foo
) // => undefined
console
.
log
(
state
.bar) // => 'foo'

Type Declarations

ts
/**
 * Converts ref to reactive.
 *
 * @see https://vueuse.org/toReactive
 * @param objectRef A ref of object
 */
export declare function 
toReactive
<
T
extends object>(
objectRef
:
MaybeRef
<
T
>,
):
UnwrapNestedRefs
<
T
>

Source

SourceDocs

Contributors

Anthony Fu
Anthony Fu
IlyaL
sibbng
三咲智子 Kevin Deng
丶远方

Changelog

v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
v12.3.0 on
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v10.3.0 on
17a72 - fix(reactiveComputed): unwrap reactive type (#3215)

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow
Get Early Access