Berbagi teknologi

Ref reaktif() dan reaktif()

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina


referensi()

  • memengaruhi: Tentukan variabel responsif.

  • tata bahasa:biarkan xxx=ref(nilai awal).

  • nilai kembalian: Objek instance RefImpl, disebut sebagai objek ref atau ref. Atribut value dari objek ref bersifat responsif.

  • hati-hati

    1. Data operasi di JS memerlukan: xxx.value, tetapi .value tidak diperlukan dalam template, cukup gunakan secara langsung.
    2. Misalnya nama =ref('Zhang San'), nama tidak responsif, nama.nilai responsif.

reaktif()

  • memengaruhi: Definisikan objek responsif (jangan gunakan untuk tipe dasar, gunakan ref, jika tidak, kesalahan akan dilaporkan).

  • tata bahasa:biarkan objek responsif = reaktif(objek sumber).

  • nilai kembalian: Objek instance dari Proxy, disebut sebagai objek responsif.

  • hati-hati: Data responsif yang didefinisikan oleh reaktif adalah "dalam".

ref vs reaktif

  • Dari perspektif makro:
    1. ref digunakan untuk mendefinisikan: tipe data dasar, tipe data objek;
    2. reaktif digunakan untuk mendefinisikan: tipe objek data.
  • perbedaan:
    1. Variabel yang dibuat oleh ref harus menggunakan nilai (Anda dapat menggunakan plug-in volar untuk menambahkan nilai secara otomatis).
    2. Reaktif menetapkan ulang objek baru dan akan kehilangan respons (Anda dapat menggunakan 0object.assign untuk menggantinya secara keseluruhan).
  • Prinsip penggunaan:
    1. Jika Anda memerlukan tipe dasar data responsif, Anda harus menggunakan ref.
    2. Jika Anda memerlukan objek responsif, hierarkinya tidak dalam, ref atau reaktif dapat digunakan.
    3. Jika Anda membutuhkan objek responsif dengan hierarki yang dalam, disarankan untuk menggunakan reaktif.

toRef dan toRef

memengaruhi: Mengonversi setiap atribut dalam objek responsif menjadi objek ref.
Komentar: toRefs memiliki fungsi yang sama dengan toRef, namun toRefs dapat dikonversi secara batch.
Sintaksnya adalah sebagai berikut:

import {reactive,toRefs,toRef} from
// 数据
let person = reactive({
	name:'张三
	age:18
})
let {name,age} = toRefs(person)
let nl = toRef(person,'age')