Cara menggunakan ref vue3, isRef, toRef, toRefs dan toRaw-View.js-php.cn

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

WBOY

Lepaskan： 2023-05-10 20:37:04

ke hadapan

1627 orang telah melayarinya

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>

Salin selepas log masuk

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 &#39;vue&#39;

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

console.log(&#39;strRes&#39;, isRef(str)) //true
console.log(&#39;numRes&#39;, isRef(num)) //false
console.log(&#39;perRes&#39;, isRef(per)) //false

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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: &#39;姓名&#39;,
  age: 18,
})
let { name, age } = toRefs(obj)
const chang = () => {
  name.value = &#39;钻石王老五&#39;
  age.value++
}
</script>
<template>
  <div>
    {{ name }} ------- {{ age }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

Salin selepas log masuk

toRefs Apabila menyahbina data, jika beberapa parameter digunakan sebagai parameter pilihan, ralat akan dilaporkan apabila parameter pilihan tidak wujud, seperti:

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

Salin selepas log masuk

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: &#39;姓名&#39;,
  age: 18,
})
let { name, age } = toRefs(obj)
let work = toRef(obj, &#39;work&#39;)
const chang = () => {
  name.value = &#39;钻石王老五&#39;
  age.value++
  console.log(&#39;work&#39;, work.value)
  work.value = &#39;程序媛&#39;
}

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!