Ringkasan Vue mencipta objek data responsif (reaktif, ref, toRef, toRefs)

1. Kaedah reaktif

reactive mencipta dan mengembalikan objek responsif mendalam (Objek proksi) berdasarkan objek masuk.

reactive akan membalut objek masuk dan mencipta
Proxy代理对象 objek itu. Ia adalah salinan reaktif objek sumber dan tidak sama dengan objek asal . Ia == "deeply" == menukar semua sifat bersarang bagi objek sumber
, membongkar dan mengekalkan sebarang rujukan rujukan di dalamnya.

Perubahan dalam nilai sifat objek responsif akan mencetuskan responsif tidak kira sedalam mana tahapnya. Menambah dan memadamkan atribut juga akan mencetuskan kereaktifan.

2. Fungsi ref

ref digunakan untuk membungkus item data ke dalam objek ref responsif. Ia menerima parameter sebarang jenis data sebagai nilai value property di dalam objek rujukan ini.

• Objek responsif yang menjana data jenis nilai (String, Number, Boolean, Symbol) Gunakan

  untuk mengakses atau menukar nilai ini.

• ref对象.valueJana objek responsif jenis objek dan tatasusunan

  (Objek dan tatasusunan biasanya tidak menggunakan mod ref, tetapi mod reaktif, yang lebih mudah)

• 3. Rujukan perbandingan reaktif

Perbandingan dari perspektif data definisi:

• ref digunakan untuk mentakrifkan :

  Mana-mana jenis data

  • reaktif digunakan untuk mentakrifkan:

    Data jenis objek (atau tatasusunan)

Bagaimana untuk memilih ref dan reaktif? Cadangan:

Nilai jenis asas (String, Number, Boolean, Symbol) atau objek nilai tunggal (objek dengan hanya satu nilai atribut seperti { count: 1 }) gunakan ref

• Nilai jenis rujukan (Objek, Tatasusunan) gunakan reaktif

Perbandingan daripada perspektif prinsip:

• ref melaksanakan responsif (perampasan data) melalui

  dan
  .

  • Object.defineProperty()getreaktif melaksanakan tindak balas (rampasan data) dengan menggunakan set dan mengendalikan data di dalam

    objek sumber
  oleh

  • Proxy Reflect

    Perbandingan dari perspektif penggunaan:
data yang ditakrifkan semula: mengakses atau menukar data memerlukan

• data yang ditakrifkan reaktif: Data pengendalian mahupun data membaca tidak memerlukan
  .
  • .value
  • .value4 toRef

Cipta ref untuk prop (sifat) objek responsif (enkapsulasi reaktif) dan simpannya Responsif

• Kedua-duanya mengekalkan hubungan rujukan

• Sintaks:

5 kepadaRefs

toRefs ialah kaedah utiliti untuk memusnahkan objek reaktif dan menukarkan const 属性名= toRef(对象,'属性名')semua sifatnya

kepada rujukan Setiap sifat (Prop) objek biasa

ialah ref yang sepadan

• Kedua-duanya mengekalkan hubungan rujukan

• Sintaks:

• : Responsif terkapsul reaktif objek, jangan kembali terus melalui pemusnahan, ini tidak responsif.

boleh diproses melalui toRefs, dan kemudian dinyahkonstruk dan dikembalikan, supaya ia responsif

const 属性名= toRefs(对象,'属性名')

6. Beberapa soalan

注意Mengapa reaktif Adakah fungsi itu juga memerlukan fungsi ref?

Apabila kita hanya mahu pembolehubah tertentu menjadi responsif, ia akan menjadi lebih menyusahkan untuk menggunakan reaktif, jadi vue3 menyediakan kaedah ref untuk memantau nilai mudah, tetapi ia tidak bermakna ref hanya boleh lulus Masukkan nilai mudah, dan lapisan bawahnya adalah reaktif, jadi ia mempunyai segala-galanya yang reaktif.

const state = reactive({ 
		age: 20,
      	name: 'zhangsan'});
return {...state}; // 错误的方式，会丢失响应式
return toRefs(state); // 正确的方式
//最佳方式
return ...toRefs(state)//将对象的各个属性的ref解构到对象根下面。

[Cadangan berkaitan: 记住：ref本质也是reactive，ref(obj)等价于reactive({value: obj})tutorial video vue.js

]

Atas ialah kandungan terperinci Ringkasan Vue mencipta objek data responsif (reaktif, ref, toRef, toRefs). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!