Cara menggunakan reaktif untuk membungkus tatasusunan dalam vue3 dan menetapkan nilai dengan betul

Gunakan reaktif untuk membalut tatasusunan untuk 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?

Menyediakan beberapa kaedah

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

Penugasan semula reaktif Vue3 adalah tidak sah

dokumentasi rasmi vue3

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!