Skip to content

toReactive

Category
Export Size
269 B
Last Changed
2 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

typescript
/**
 * 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.

Save 37% on one year of learning Vue, Includes the Vue.js Master Class.
Get Offer