Vue3+TypeScript：类中对象数组属性更新后DOM不渲染问题求助

核心原因 #

DOM未同步更新的本质是数组内的InvoiceItem对象未被Vue追踪为响应式对象：

• 通过reactive(new HouseInvoice())将类实例转为响应式时，仅houseInvoice本身和items数组是响应式的，但数组内的普通JS对象（比如HouseInvoice.map初始化的元素），Vue无法追踪其内部属性的变更。
• 直接修改houseInvoice.items[index].desc时，因为对象本身不是响应式的，Vue检测不到属性变化，因此DOM不会更新。

具体解决方案 #

方案1：确保每个InvoiceItem都是响应式对象 #

修改HouseInvoice.map方法，将每个数组元素转为响应式：

import { reactive } from 'vue';

export class HouseInvoice{
    public items:InvoiceItem[] =[];
    
    public static map(obj:{[key:string]:any}):HouseInvoice{
        const houseInvoice = new HouseInvoice();
        // 为每个item添加响应式代理
        houseInvoice.items = (obj.items ?? []).map(item => reactive(item) as InvoiceItem);
        return houseInvoice;
    }
}

同时统一addNewItem的创建逻辑：

const addNewItem = () =>{
  const invoiceItem:InvoiceItem = {
    weight: 0,sku: "", id: "",
    name: "", desc: "", height: 0, width: 0,
    length: 0, qty: 1, cubes:0, total: 0
  };
  houseInvoice.items.push(reactive(invoiceItem));
}

方案2：通过数组API强制触发响应式更新 #

如果不想修改类的初始化逻辑，可通过splice替换数组元素，强制Vue检测到变化：

const editItemData = (index:number, selectedId:string) =>{
  const selectedItem = storedItems.items.find(element => element.id == selectedId);
  
  if(selectedItem){
    // 复制原对象并更新desc，用splice替换元素
    const updatedItem = { ...houseInvoice.items[index], desc: selectedItem.desc ?? "test" };
    houseInvoice.items.splice(index, 1, reactive(updatedItem) as InvoiceItem);
  }
}

方案3：改用ref管理数组 #

如果类结构允许，将items改为ref数组，更直观地管理响应性：

// 修改HouseInvoice类
import { ref } from 'vue';

export class HouseInvoice{
    public items = ref<InvoiceItem[]>([]);
    
    public static map(obj:{[key:string]:any}):HouseInvoice{
        const houseInvoice = new HouseInvoice();
        houseInvoice.items.value = (obj.items ?? []).map(item => reactive(item) as InvoiceItem);
        return houseInvoice;
    }
}

// 组件中使用
const houseInvoice = reactive(new HouseInvoice());
// 模板遍历改为houseInvoice.items.value

额外优化建议 #

避免使用数组索引作为v-for的key，改用每个item的唯一id，让Vue更精准地追踪元素变化：

<Table.Tr v-for="(mItem, itemKey) in houseInvoice.items" :key="mItem.id">

内容的提问来源于stack exchange，提问作者crushman