Rumah >hujung hadapan web >View.js >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
fungsi : Cipta objek yang nilai ref
nya menunjuk kepada sesuatu dalam objek lain Nilai atribut dikaitkan dengan objek asal. [Cadangan berkaitan: value
tutorial video vuejs, pembangunan bahagian hadapan web]
yang sepadan berdasarkan atribut pada objek responsif, seperti ini ref
yang dibuat disegerakkan dengan atribut sumbernya dan mempunyai hubungan rujukan dengan objek sumber ref
ref
Sintaks: Nama pembolehubah = const
toRef(源对象,源对象下的某个属性)
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: '前端开发', trade: '互联网' } }); </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: '前端开发', trade: '互联网' } }); 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: '前端开发', trade: '互联网' } }); 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: '前端开发', trade: '互联网' } }); // 想要修改指定哪个对象具备响应式,那么就使用toRef函数处理,toRef(源对象,源对象下的某个属性) const name = toRef(person,'name'); const age = toRef(person,'age'); // 经过了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()
berbeza daripada ref toRef()
Terdapat perbezaan ref
ref
toRef
mengubah suai data halaman akan dikemas kini, tetapi data sumber tidak akan disegerakkan hubungan rujukan.
<script setup> import { reactive,toRef } from "vue"; const person = reactive({ name:"川川", age: 18, job: { web: '前端开发', trade: '互联网' } }); // 使用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
ref
fungsi toRefs() ref()
Maka ini toRef()
mempunyai fungsi yang sama sebagai toRef()
, berbilang
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: '前端开发', trade: '互联网' } }); // 通过toRefs()批量处理,此时通过解构 const {name,age} = toRefs(person); // 经过了toRef的处理,修改变量的值,那么就需要xx.value function handleChangeAttrs() { name.value = "itclanCoder"; age.value = 20; } </script>Nota
toRefs
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 ref
ref
toRef
Tujuan
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
Tukar kepada keupayaan data responsif Apabila data diubah suai, data halaman akan dikemas kini dua fungsi akan digunakan (perkongsian video pembelajaran: tutorial pengenalan vuejs, Video pengaturcaraan asas)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 composition API
ini sangat praktikal dan boleh digunakan pembangunan perniagaan sebenar , jika ia melibatkan pengubahsuaian data pada halaman, maka
Atas ialah kandungan terperinci Perbandingan fungsi responsif Vue3: toRef() vs toRefs(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!