Bagaimana untuk menyelesaikan masalah tentang ref dan reaktif dalam Vue3

Soalan tentang ref dan reaktif

Jika anda telah menggunakan Vue3, anda tahu bahawa terdapat dua API reaktif yang sangat biasa digunakan dalam Vue3: reaktif dan ref. Mereka menjadikan data yang ingin kita jejaki responsif.

Kami sentiasa diberitahu bahawa rujukan boleh digunakan untuk mencipta primitif reaktif dan jenis rujukan. Untuk jenis rujukan, lapisan bawah juga ditukar kepada reaktif untuk pemprosesan responsif. Oleh itu, mengapa anda perlu menggunakan reaktif? Tidakkah cukup dengan hanya menggunakan ref untuk segala-galanya?

Walaupun data reaktif yang dicipta oleh ref perlu diakses menggunakan .value dalam skrip, dalam kes ini ini tidak akan memberi banyak kesan kepada program. Templat menambah .value secara automatik, jadi tidak perlu menggunakan akses .value dalam templat.

Memandangkan pada asasnya tiada perbezaan antara keduanya, tetapi API reaktif masih terdedah, adakah terdapat senario yang reaktif boleh lakukan tetapi ref tidak boleh?

Pemahaman ringkas tentang ref & reaktif

Mari kita fahami secara ringkas tentang kedua-dua API ini.

reaktif

Mengembalikan salinan reaktif bagi objek Penukaran reaktif adalah "dalam" - ia mempengaruhi semua sifat bersarang. Selalunya kami menulis begini.

const obj = reactive({ count: 0 })

dan boleh digunakan terus.

const count = obj.count

ref

mengambil nilai dalaman dan mengembalikan objek ref reaktif dan boleh ubah. Objek ref hanya mempunyai satu sifat .value, yang menunjuk kepada nilai dalam.. Selalunya kami menulis begini. Apabila

const data = ref(xxx)

dirujuk, ia biasanya dirujuk melalui data.value.

const dataValue = data.value

Dengan mengesan kod sumber Vue3, kami boleh membuktikan bahawa apabila kami memanggil kaedah ref untuk menentukan data reaktif, apabila parameter ialah jenis objek, kaedah reaktif sebenarnya digunakan. Iaitu, sifat data.value di atas dicipta melalui kaedah reaktif.

Nota:

Apa yang reaktif boleh lakukan, ref juga boleh lakukan, dan ia masih dilakukan dengan reaktif

Apabila parameter ref ialah objek, gunakan Perkara yang paling penting ialah kaedah reaktif

Dalam Vue3, jika anda ingin menjadikan data jenis objek responsif, kedua-dua reaktif dan ref boleh digunakan, dan ref disokong secara dalaman melalui reaktif. Dalam erti kata lain, apa yang anda boleh lakukan dengan reaktif, saya boleh lakukan dengan ref.

Ringkasnya, ref dikapsulkan dan dipertingkatkan pada reaktif, jadi dalam Vue3, ref juga boleh melakukan perkara yang boleh dilakukan oleh reaktif, dan ref juga boleh melakukan perkara yang tidak boleh dilakukan oleh reaktif.

Secara peribadi, saya faham bahawa ref ialah gula sintaksis untuk reaktif Contohnya: ref(1) adalah bersamaan dengan reactive({value: 1});

Menggunakan ref untuk projek biasa tidak mengapa. . , masalahnya tidak besar

Perbezaan antara vue3 ref dan reaktif

Ref

Pemantauan reaktif terhadap data ref. Fungsi ref menghantar nilai sebagai parameter, biasanya jenis data asas, dan mengembalikan objek Ref responsif berdasarkan nilai Setelah nilai dalam objek ditukar dan diakses, ia akan dijejaki, sama seperti contoh kami yang ditulis semula kod adalah sama. Dengan mengubah suai nilai count.value, anda boleh mencetuskan pemaparan semula templat dan memaparkan nilai terkini. reaktif digunakan untuk mentakrifkan jenis Data yang lebih kompleks, tetapi selepas ditakrifkan, pembolehubah di dalamnya tidak lagi menjadi data objek Ref responsif

, jadi anda perlu menggunakan fungsi toRefs untuk menukarnya menjadi objek data responsif

Tukar kod yang ditulis di atas menggunakan ref kepada kod reaktif

<template>
  
  <h2 id="name">{{name}}</h2>
  <h2 id="age">{{age}}</h2>
  <button @click="sayName">按钮</button>
</template>

<script lang="ts">
import {ref,computed} from &#39;vue&#39; 

export default {
  name: &#39;App&#39;,
  setup(){
    const name = ref(&#39;zhangsan&#39;)
    const birthYear = ref(2000)
    const now = ref(2020)
    const age = computed(()=>{
      return now.value - birthYear.value
    })
    const sayName = () =>{
      name.value = &#39;I am &#39; + name.value
    }
    return {
      name,
      sayName,
      age
    }
  }
}
</script>

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah tentang ref dan reaktif dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!