Wie überspringe ich tief verschachtelte Eigenschaften in der Composition API von Vue für die reaktive Konvertierung?

Question

In vue-composition-api: Mit der Methode reactive() möchte ich einen Teil des Objekts als Referenz behalten.

---

Ich habe einige Produkte, die zu benutzerdefinierten Kategorien gehören:

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

und die Bestellliste, die auf die Produkte im Deep-Objekt verweist:

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

Ich habe durch example.orders[0].product == chair -> false Inspektion herausgefunden, dass es sich um verschiedene Objekte handelt. Ich habe auch festgestellt, dass example.orders[0].product nicht vom Typ Produkt ist.

Da ich viele verschiedene Bestellungen haben kann und die Produkte viele Daten enthalten, möchte ich example.orders[].product einen Verweis auf das Originalprodukt beibehalten.

Ich brauche keine Reaktivität in den Produkten selbst, weil sie konstant sind. (Dies ist eine Electron-Anwendung, der Inhalt bleibt unverändert, solange das Programm läuft)

Ich möchte nur auf die Bestellung reagieren.

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)
  }))
});

注意：请阅读标签上的警告。