Cara menggunakan ref dan reaktif dalam Vue3

1. Apa itu

ref dan reaktif ialah API yang digunakan dalam Vue3 untuk melaksanakan responsif data

Secara amnya, ref mentakrifkan jenis data asas , reactive Tentukan jenis data rujukan

2 Mari kita bincangkan tentang reaktif dahulu

Reaktif mentakrifkan jenis data rujukan (mengambil objek dan tatasusunan sebagai contoh), yang boleh menukar atribut dalaman atau item data jenis data kompleks Ia. diisytiharkan sebagai data responsif, jadi tindak balas reaktif adalah peringkat dalam Lapisan bawah adalah untuk melaksanakan responsif data melalui Proxy ES6 Berbanding dengan Object.defineProperty Vue2, ia mempunyai keupayaan untuk memantau penambahan dan operasi pemadaman , boleh memantau perubahan dalam sifat objek dan kelebihan lain

Contoh penggunaan reaktif untuk menentukan jenis data objek

const paginationConfig = reactive({
	pageNum: 1,
	pageSize: 10
}) // 定义

const onChange = () => {
	paginationConfig.pageNum = 2 // js使用
	paginationConfig.pageSize = 20 // js使用
}

<!-- Vue3模板引用使用 -->
<a-pagination v-model:current="paginationConfig.pageNum"></a-pagination>

Jika anda menggunakan reaktif untuk menentukan jenis data asas, Vue3 akan melaporkan ralat amaran, seperti yang ditunjukkan dalam rajah

const str = reactive('我是字符串')

Analisis kod sumber Vue3 menunjukkan bahawa apabila menggunakan reaktif untuk menentukan data responsif, jika data bukan jenis objek dan dikembalikan secara langsung, tiada data seterusnya akan diproses Pemprosesan responsif dilakukan, itulah sebabnya saya hanya menggunakan reaktif untuk menentukan data responsif jenis objek Bagaimana dengan data jenis tatasusunan? Jawapannya boleh didapati di bawah

3 Mari kita bercakap tentang ref sekali lagi

Mengapa saya faham bahawa ref ialah pengkapsulan semula reaktif, kerana dalam kod sumber asas ref, ia adalah. masih dilaksanakan oleh reactive()

Daripada analisis kod sumber, kita tahu bahawa jika ia adalah jenis objek, logik asasnya ialah masih reaktif(). Di samping itu, kami tahu bahawa menggunakan ref Apabila mentakrifkan jenis data asas, anda perlu menambah akhiran .value apabila menggunakannya dalam skrip Walau bagaimanapun, ini tidak diperlukan dalam templat akan menambahkannya secara automatik untuk anda, yang menjadikan ref lebih mudah daripada reaktif

let num = ref(0) // 定义
let isShow = ref(false)  // 定义

const onChange = () => {
	num.value++  // js使用
	isShow.value = true  // js使用
}

<!-- Vue3模板引用使用 -->
<a-modal v-model:visible="isShow"></a-modal>

4 Perbandingan tatasusunan definisi ref dan reaktif

Contoh penggunaan ref untuk mentakrifkan tatasusunan adalah seperti berikut

const tableData = ref([]) // 定义

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData.value = data // 修改
}

rrree

Angka tersebut menggunakan data jadual yang biasa kami gunakan sebagai contoh. Dapat dilihat bahawa tatasusunan definisi ref pada dasarnya adalah sama dengan tatasusunan definisi. Mari kita lihat reaktif

<!-- Vue3模板引用使用 -->
<a-table v-model:dataSource="tableData"></a-table>

rrree

Perlu diambil perhatian bahawa menggunakan tableData = kaedah pengubahsuaian data akan menyebabkan tableData hilang secara reaktif Penyelesaiannya adalah seperti berikut (untuk rujukan)

const tableData = reactive([]) // 定义

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData = data // 修改，错误示例，这样赋值会使tableData失去响应式
}

Atas ialah kandungan terperinci Cara menggunakan ref dan reaktif dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!