Rumah >hujung hadapan web >View.js >Cara menggunakan reaktif untuk membungkus tatasusunan dalam vue3 dan menetapkan nilai dengan betul
Keperluan: Berikan data senarai yang diminta oleh antara muka kepada arr data respons
const arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败,直接赋值丢失了响应性 // arr = res; // 方法2 这样也是失败 // arr.concat(res); // 方法3 可以,但是很麻烦 res.forEach(e => { arr.push(e); }); };
vue3 gunakan proxy
, objek mahupun tatasusunan tidak boleh diberikan secara langsung keseluruhan nilai.
boleh difahami menggunakan kaedah 1, tetapi penetapan terus kepada objek yang dibalut dengan reactive
tidak boleh dilakukan.
Mengapa kaedah 2 tidak berkesan?
Hanya tugasan tolak atau traversal berdasarkan indeks boleh mengekalkan tindak balas tatasusunan reaktif?
Bagaimana cara menggabungkan keseluruhan tatasusunan menjadi data responsif dengan mudah?
const state = reactive({ arr: [] }); state.arr = [1, 2, 3]
atau
const state = ref([]) state.value = [1, 2, 3]
atau
const arr = reactive([]) arr.push(...[1, 2, 3])
Kaedah ini boleh mencetuskan tindak balas yang pertama
reactive() mengembalikan proksi responsif objek
Jadi kaedah reaktif harus bertindak pada Objek objek, jika anda mahu untuk menggunakan tatasusunan, anda perlu membungkusnya:
let list = reactive({ data: [{id: 01, name: 'XXX'}] })
atau gunakan ref:
let list = ref([{id: 1, name: 'Andy'}])
Kod pengarang asal telah dipetik:
import { reactive, ref } from 'vue' export default { setup() { // 需要一个带默认值的数组list; let list = reactive([{id: 1, name: 'Andy'}]) // 每次触发事件重置list,把新值放入,此种方式不会触发视图更新 const checkBtn = () => { // 此时重置操作 地址指向变成一个新的地址,不会触发视图更新 list = [{id: 1, name: 'Andy'}] list.push({id: 2, name: 'Lucy'}) } // -------------------------------------------------- // 正确的重置处理方法如下:使用reactive将数组包裹到一个对象中 let list = reactive({ data: [{id: 1, name: 'Andy'}] }); const checkBtn = () => { list.data = [{id: 1, name: 'Andy'}] list.data.push({id: 2, name: 'Lucy'}) } // 或者使用ref let list = ref([{id: 1, name: 'Andy'}]); const checkBtn = () => { list.value = [{id: 1, name: 'Andy'}] list.value.push({id: 2, name: 'Lucy'}) } return { list, checkBtn } }, }
Atas ialah kandungan terperinci Cara menggunakan reaktif untuk membungkus tatasusunan dalam vue3 dan menetapkan nilai dengan betul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!