SoFunction
Updated on 2025-04-05

Detailed introduction to ref, isRef, toRef, toRefs, toRaw of vue3

ref, isRef, toRef, toRefs, toRaw looked at a bunch of similar things, one with two big ones. Today I have compiled an article to introduce their functions and differences in detail.

1、ref

In addition to getting elements, the ref attribute can also use the ref function to create a responsive data. When the data value changes, the view will be automatically updated.

<script lang="ts" setup>
import { ref } from 'vue'
let str: string = ref('I am Zhang San')
const chang = () => {
   = 'I am Diamond King'
  ()
}
</script>
<template>
  <div>
    {{ str }}
    <button type="button" @click="chang">Modify the value</button>
  </div>
</template>

2、isRef

Check whether the variable is an object wrapped by ref, if it is returned true, otherwise it returns false.

import { ref, isRef, reactive } from 'vue'

let str: string = ref('I am Zhang San')
let num: number = 1
let per = reactive({ name: 'Code Goddess', work: 'Programs' })

('strRes', isRef(str)) //true
('numRes', isRef(num)) //false
('perRes', isRef(per)) //false

3、toRef

Creates a ref object whose value points to a property in another object.

toRef(obj, key) converts a value in an object into responsive data, and is divided into two situations:

  • toRef defines original non-responsive data. When modifying values, both the original data and copy data will change, but the view will not be updated.
<script>
  import { ref, isRef, toRef, reactive } from 'vue'
let obj = {
  name: 'Name',
  age: 18,
}
let name: string = toRef(obj, 'name')
const chang = () => {
   = 'Diamond King'
   = 'Li Si'
  () // Li Si  ('name', name) // Li Si}
//chang() // Called before DOM mount</script>
<template>
  <div>
    {{  }} ------- {{ name }}
    <button type="button" @click="chang">Modify the value</button>
  </div>
</template>

Note: If the chang method is called before the DOM is mounted and the value is changed, the data and view will change at this time.

  • toRef defines the original data responsive data. When modifying the value, the original data and copy data will change and the view will be updated.
<script>
  import { ref, isRef, toRef, reactive } from 'vue'
let obj = reactive({
  name: 'Name',
  age: 18,
})
let name: string = toRef(obj, 'name')
const chang = () => {
   = 'Diamond King'
   = 'Li Si'
}
</script>
<template>
  <div>
    {{  }} ------- {{ name }}
    <button type="button" @click="chang">Modify the value</button>
  </div>
</template>

The final value is "Li Si".

4、toRefs

toRefs is used to deconstruct reactive data of ref and reactive packages. Receive an object as a parameter, iterates through all properties on the object, and turns all properties on the object into responsive data.

let obj = reactive({
  name: 'Name',
  age: 18,
})
let { name, age } = toRefs(obj)
const chang = () => {
   = 'Diamond King'
  ++
}
</script>
<template>
  <div>
    {{ name }} ------- {{ age }}
    <button type="button" @click="chang">Modify the value</button>
  </div>
</template>

When deconstructing data toRefs, if some parameters are optional parameters, an error will be reported when the optional parameters do not exist, such as:

let obj = reactive({
  name: 'Name',
  age: 18,
})
let { name, age, work } = toRefs(obj)
const chang = () => {
   = 'Diamond King'
  ++
  ('work', )
   = 'Programs'
}

You can use toRef to solve this problem. When using toRef to deconstruct an attribute of an object, first check whether the attribute exists on the object. If it exists, inherit the attribute value on the object. If it does not exist, create one.

Modify the above code as:

let obj = reactive({
  name: 'Name',
  age: 18,
})
let { name, age } = toRefs(obj)
let work = toRef(obj, 'work')
const chang = () => {
   = 'Diamond King'
  ++
  ('work', )
   = 'Programs'
}

5、toRaw

Convert a responsive object to a primitive object. Do something you don't want to be listened to, get the raw data from ref or reactive.

When modifying the original responsive data, the data obtained by toRaw will be modified and the view will be updated, such as:

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
  name: 'Name',
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
   = 'Diamond King'
  ++
}
</script>
<template>
  <div>
    {{  }} ------- {{  }}
    <button type="button" @click="chang">Modify the value</button>
    <br />
    {{ newObj }}
  </div>
</template>

If the original data obtained by toRaw is modified, the original data will also be modified, but the view will not be updated. like:

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
  name: 'Name',
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
   = 'Diamond King'
  ++
}
const changNew = () => {
   = 'funny'
  ('newObj', newObj)
  ('obj', obj)
}
</script>
<template>
  <div>
    {{  }} ------- {{  }}
    <button type="button" @click="chang">Modify the value</button>
    <br />
    {{ newObj }}
    <button @click="changNew">Revise</button>
  </div>
</template>

The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support. If you want to know more about it, please see the relevant links below