vue reactive =赋值 和push赋值 有啥不同

问题描述

父组件：1、定义一个变量，并把这个值 传给子组件

let allSeriesArr = reactive([]);

const getAllSeries = () => {
  productApi().getProductSeriesAllApi({}).then( (res:any) => {
    console.log(res);
    if(res.code === 0){
        //获取到接口返回的值，并赋值给这个变量
      allSeriesArr.push(
        ...res.data.list
      );
    }
  }).catch(()=>{})
}

子组件：接收，发现数据不会变化

import {defineProps} from 'vue';

//接收
const props = defineProps<{
  allSeriesArr:{
    type:Array,
    defaults:[],
  }
}>();


// html:
{{ statusArr }} 

原因分析：

在Vue中，reactive用于创建响应式对象，使得当这个对象的属性发生变化时，视图可以自动更新。当你使用=进行赋值时，你是在替换整个响应式对象，这可能会导致之前的响应式跟踪失效。而当你使用push进行赋值时，你是在向数组中添加新元素，push方法本身是数组的一个方法，它不会替换原数组，因此响应式跟踪仍然有效。

解决方案：

用push 赋值，而不是 =
allSeriesArr.push(
…res.data.list
);
而不是
allSeriesArr = res.data.list