Cara menggunakan ref vue3, isRef, toRef, toRefs dan toRaw

1. ref

Selain mendapatkan elemen, atribut ref juga boleh menggunakan fungsi ref untuk mencipta data responsif Apabila nilai data berubah, paparan akan dikemas kini secara automatik.

<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

Menyemak sama ada pembolehubah ialah objek yang dibalut oleh ref, jika ya ia mengembalikan benar, jika tidak ia mengembalikan palsu.

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

Buat objek ref yang nilainya menghala ke sifat dalam objek lain.

toRef(obj, key) menukar nilai dalam objek kepada data responsif, dibahagikan kepada dua situasi:

• toRef mentakrifkan data tidak responsif asal , apabila nilai diubah suai, kedua-dua data asal dan data yang disalin akan berubah, tetapi paparan tidak akan dikemas kini.

<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>

Nota: Jika kaedah chang dipanggil sebelum DOM dipasang untuk menukar nilai, kedua-dua data dan paparan akan berubah.

• toRef mentakrifkan data responsif data asal Apabila nilai diubah suai, data asal dan data salinan akan berubah dan paparan juga akan dikemas kini.

<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>

Nilai akhir ialah "John Doe".

4. toRefs

toRefs digunakan untuk menyahbina data responsif yang dibalut oleh ref dan reaktif. Terima objek sebagai parameter, rentas semua sifat pada objek dan tukar semua sifat pada objek menjadi data responsif.

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 Apabila menyahbina data, jika beberapa parameter digunakan sebagai parameter pilihan, ralat akan dilaporkan apabila parameter pilihan tidak wujud, seperti:

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 = '程序媛'
}

Pada masa ini, anda boleh gunakan toRef untuk menyelesaikan masalah ini, gunakan Apabila toRef menyahbina atribut objek, ia mula-mula menyemak sama ada atribut wujud pada objek Jika ia wujud, ia mewarisi nilai atribut pada objek .

Ubah suai kod di atas kepada:

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

Tukar objek responsif kepada objek asal. Lakukan sesuatu yang anda tidak mahu dipantau, dapatkan data mentah daripada ref atau reaktif.

Apabila mengubah suai data responsif asal, data yang ditukar oleh toRaw akan diubah suai dan paparan juga akan dikemas kini, seperti:

<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>

Jika data asal yang diperoleh oleh toRaw diubah suai, data asal juga akan diubah suai, tetapi paparan tidak dikemas kini. Seperti:

<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>

Atas ialah kandungan terperinci Cara menggunakan ref vue3, isRef, toRef, toRefs dan toRaw. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!