如何在Vue的Composition API中跳過深層嵌套的屬性進行響應式轉換？

Question

在 vue-composition-api 中： 使用reactive()方法，我想保留物件的一部分作為參考。

---

我有一些產品，屬於自訂類別：

const chair = new Product(...); // lots of information in each product 
const table = new Product(...); // lots of information in each product

以及在深層物件中引用產品的訂單清單：

let example = reactive({   
  orders: [
    { product: chair, quantity: 2 }, 
    { product: table, quantity: 1 }, 
    { product: chair, quantity: 6 }, 
    { product: table, quantity: 2 },
  ] 
});

我透過 example.orders[0].product == chair -> false 檢查發現這些是不同的物件。 我還發現 example.orders[0].product 不是 Product 類型。

由於我可以有很多不同的訂單，並且產品包含很多數據，因此我希望 example.orders[].product 保留對原始產品的引用。

我不需要產品本身的反應性，因為它們是恆定的。 （這是一個電子應用程序，只要程式運行，內容就會保持不變）

我只想對訂單進行反應。

Answer 1

使用markRaw：

import { markRaw, reactive } from 'vue';

const example = reactive({   
  orders: [
    { product: chair, quantity: 2 }, 
    { product: table, quantity: 1 }, 
    { product: chair, quantity: 6 }, 
    { product: table, quantity: 2 },
  ].map(el => ({ 
    ...el,
    product: markRaw(el.product)
  }))
});

注意：請閱讀標籤上的警告。