How to use vue3's ref, isRef, toRef, toRefs, and toRaw

1. ref

In addition to obtaining elements, the ref attribute can also use the ref function to create a responsive data. When the data value changes, the view automatically updates.

<script lang="ts" setup>
import { ref } from &#39;vue&#39;
let str: string = ref(&#39;我是张三&#39;)
const chang = () => {
  str.value = &#39;我是钻石王老五&#39;
  console.log(str.value)
}
</script>
<template>
  <div>
    {{ str }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

2. isRef

Check whether the variable is an object wrapped by ref, if so, return true, otherwise return false.

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

let str: string = ref('我是张三')
let num: number = 1
let per = reactive({ name: '代码女神', work: '程序媛' })

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

3. toRef

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

toRef(obj, key) Converts a value in the object into responsive data, divided into two situations:

• toRef defines original non-responsive data , when the value is modified, both the original data and the copied data will change, but the view will not be updated.

<script>
  import { ref, isRef, toRef, reactive } from &#39;vue&#39;
let obj = {
  name: &#39;姓名&#39;,
  age: 18,
}
let name: string = toRef(obj, &#39;name&#39;)
const chang = () => {
  obj.name = &#39;钻石王老五&#39;
  name.value = &#39;李四&#39;
  console.log(obj.name) // 李四
  console.log(&#39;name&#39;, name) // 李四
}
//chang() //DOM挂载前调用
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ name }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

Note: If the chang method is called before the DOM is mounted to change the value, both the data and the view will change.

• toRef defines original data responsive data. When the value is modified, the original data and copy data will change, and the view will also be updated.

<script>
  import { ref, isRef, toRef, reactive } from &#39;vue&#39;
let obj = reactive({
  name: &#39;姓名&#39;,
  age: 18,
})
let name: string = toRef(obj, &#39;name&#39;)
const chang = () => {
  obj.name = &#39;钻石王老五&#39;
  name.value = &#39;李四&#39;
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ name }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

The final value is "John Doe".

4. toRefs

toRefs is used to deconstruct the responsive data wrapped by ref and reactive. Receive an object as a parameter, traverse all properties on the object, and turn all properties on the object into responsive data.

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
const chang = () => {
  name.value = '钻石王老五'
  age.value++
}
</script>
<template>
  <div>
    {{ name }} ------- {{ age }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

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

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age, work } = toRefs(obj)
const chang = () => {
  name.value = '钻石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

At this time, you can use toRef to solve this problem, use When toRef deconstructs an attribute of an object, it first checks whether the attribute exists on the object. If it exists, it inherits the attribute value on the object. If it does not exist, it creates one.

Modify the above code to:

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
let work = toRef(obj, 'work')
const chang = () => {
  name.value = '钻石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

5. toRaw

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

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

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from &#39;vue&#39;
let obj = reactive({
  name: &#39;姓名&#39;,
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
  obj.name = &#39;钻石王老五&#39;
  obj.age++
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ obj.age }}
    <button type="button" @click="chang">修改值</button>
    <br />
    {{ newObj }}
  </div>
</template>

If the original data obtained by toRaw is modified, the original data will also be modified. , but the view does not update. Such as:

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from &#39;vue&#39;
let obj = reactive({
  name: &#39;姓名&#39;,
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
  obj.name = &#39;钻石王老五&#39;
  obj.age++
}
const changNew = () => {
  newObj.name = &#39;搞笑&#39;
  console.log(&#39;newObj&#39;, newObj)
  console.log(&#39;obj&#39;, obj)
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ obj.age }}
    <button type="button" @click="chang">修改值</button>
    <br />
    {{ newObj }}
    <button @click="changNew">修改</button>
  </div>
</template>

The above is the detailed content of How to use vue3's ref, isRef, toRef, toRefs, and toRaw. For more information, please follow other related articles on the PHP Chinese website!