Perbandingan fungsi responsif Vue3: toRef() vs toRefs()

ref ialah fungsi API responsif yang mengendalikan jenis data asas Pembolehubah yang diisytiharkan dalam setup boleh digunakan terus dalam templat

Tiada Data pembolehubah. diproses oleh pakej API responsif tidak mempunyai keupayaan responsif

Iaitu, data sering diubah suai dalam logik, tetapi halaman tidak akan dikemas kini Jadi bagaimana untuk menukar data tidak responsif Untuk menjadi data responsif

memerlukan penggunaan toRef() dan toRefs() componsition API

hanya melihat kepada konsep, yang selalunya abstrak dan sukar untuk difahami contoh khusus

fungsi toRef()

fungsi : Cipta objek yang nilai refnya menunjuk kepada sesuatu dalam objek lain Nilai atribut dikaitkan dengan objek asal. [Cadangan berkaitan: valuetutorial video vuejs, pembangunan bahagian hadapan web]

ialah untuk mencipta

yang sepadan berdasarkan atribut pada objek responsif, seperti ini ref yang dibuat disegerakkan dengan atribut sumbernya dan mempunyai hubungan rujukan dengan objek sumber ref

Menukar nilai atribut sumber akan mengemas kini nilai

ref

Sintaks: Nama pembolehubah = consttoRef(源对象,源对象下的某个属性)

Contohnya:

const name = toRef(person,'name')

Aplikasi: Untuk menyediakan atribut tertentu dalam objek responsif kepada Apabila digunakan secara luaran, jika anda tidak mahu kehilangan responsif, ia juga berguna untuk menghantar daripada prop kepada fungsi gabungan ref

Kelemahan: hanya boleh mengendalikan satu atribut , tetapi toRef() boleh diproses dalam kelompok sekali gus toRefs(源对象)

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});
</script>

Kemudian jika anda ingin memberikan data dalam templat, anda boleh menulisnya seperti ini

{{person.name}} -{{person.age}}-{{person.job.web}}-{{person.job.trade}}

Jika anda tidak mahu menulis terlalu lama dalam templat , maka anda boleh menyahbina dahulu, seperti yang ditunjukkan di bawah

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

const { name, age} = person;
const { web,trade} = person.job;
</script>

Kemudian dalam templat, anda boleh menggunakan pembolehubah secara langsung, seperti yang ditunjukkan di bawah

{{name}}-{{age}}-{{web}}-{{trade}}

Sekarang, jika kita mahu mengubah suai Data berubah, anda akan mendapati bahawa data dalam logik akan diubah suai, tetapi data dalam halaman tidak akan dikemas kini, iaitu responsif adalah hilang. Contohnya: dalam templat berikut, ubah suai nama dan atribut umur masing-masing

<button @click="handleChangeAttrs">修改属性</button>

Kemudian Dalam kod logik

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

const { name, age} = person;
const { web,trade} = person.job;

// 这样直接操作数据是无法修改的,因为它不是一个响应式数据,只是一个纯字符串,不具备响应式
function handleChangeAttrs() {
    name = "itclanCoder";
    age = 20;
}
</script>

, jika anda ingin mengubah suai data, ia menyokong responsif. Untuk menukar data tidak responsif kepada data responsif, anda perlu meminjam

, seperti yang ditunjukkan di bawah toRef(源对象,源对象下指定的属性)函数

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 想要修改指定哪个对象具备响应式,那么就使用toRef函数处理,toRef(源对象,源对象下的某个属性)
const name = toRef(person，&#39;name&#39;);  
const age = toRef(person,&#39;age&#39;);

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

Dalam templat, ia masih seperti yang ditunjukkan di atas

{{person}}
{{name}}-{{age}}-{{web}}-{{trade}}
<button @click="handleChangeAttrs">修改属性</button>

Anda akan mendapati bahawa selepas menggunakan fungsi

untuk memproses, data tidak responsif mempunyai keupayaan untuk responsif, dan data sumber Ia juga akan disegerakkantoRef()

Jika ia hanya digunakan untuk paparan halaman data tulen, tidak perlu menukar data kepada data responsif Jika anda perlu mengubah suai data, maka anda perlu menukar data tidak responsif kepada data responsif dilaksanakan melalui fungsi

berbeza daripada ref toRef()

Jika anda menggunakan

untuk memproses data, gunakan

untuk memproses data seperti yang ditunjukkan di bawah, halaman juga boleh melaksanakan pengemaskinian responsif bagi data, tetapi ia berbeza daripada

Terdapat perbezaan refreftoRef mengubah suai data halaman akan dikemas kini, tetapi data sumber tidak akan disegerakkan hubungan rujukan.

adalah bersamaan dengan menyalin semula data objek sumber

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 使用ref
const name = ref(person.name);  
const age = toRef(person.age);

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

menerima nilai tulen

reffungsi toRefs() ref()

hanya boleh memproses atribut tertentu. ditentukan oleh objek sumber. Jika objek sumber mempunyai banyak atribut, ia akan menyusahkan untuk menggunakan

untuk memprosesnya satu persatu

Maka ini toRef() mempunyai fungsi yang sama sebagai toRef() , berbilang

objek boleh dibuat dalam kelompok, dan boleh disegerakkan dengan objek sumber Terdapat hubungan rujukan

toRefs()toRef() sintaks ref:

, <🎜. >

seperti Kod contoh di atas, diubah suai kepada ditunjukkan sebagai toRefs(源对象)toRefs(person)

berguna apabila mengembalikan objek reaktif daripada fungsi yang digubah. Menggunakan ini, komponen pengguna boleh memusnahkan/mengembangkan objek yang dikembalikan tanpa kehilangan responsif toRefs()

<script setup>
import { reactive,toRefs } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 通过toRefs()批量处理,此时通过解构
const {name,age} = toRefs(person);  

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

Nota

toRefs

Hanya objek sumber boleh dikira apabila dipanggil Cipta

import { toRefs } from "vue";
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // 在返回时都转为ref
  return toRefs(state)
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

menggunakan atribut yang disebutkan di atas. Jika anda ingin mencipta

untuk atribut yang mungkin belum wujud lagi, gunakan

toRefs sebaliknya Mengapa anda perlu toRef() dan toRefs() fungsi refreftoRef Tujuan

: Di bawah premis untuk memastikan tindak balas tidak hilang, objek didekonstruksi untuk memudahkan penguraian dan penyebaran data objek

Premise: Ia bertujuan untuk bukan- objek responsif ( dikapsulkan) Objek biasa

Nota : tidak mewujudkan kereaktifan (iaitu perkara reactive), ia hanya meneruskan kereaktifan itu sendiri, membiarkan bukan- data responsif melalui

atau

Tukar kepada keupayaan data responsif

Ringkasan

toRef() dan toRefs() ini sangat praktikal, kedua-duanya menukar data tidak responsif kepada data responsif, dan boleh mengekalkan penyegerakan data dengan objek sumber, yang pertama hanya menyokong pemprosesan data atribut tunggal, manakala yang terakhir menyokong pemprosesan data kelompok

Apabila data diubah suai, data halaman akan dikemas kini dua fungsi composition API ini sangat praktikal dan boleh digunakan pembangunan perniagaan sebenar , jika ia melibatkan pengubahsuaian data pada halaman, maka

akan digunakan (perkongsian video pembelajaran: tutorial pengenalan vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Perbandingan fungsi responsif Vue3: toRef() vs toRefs(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!