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.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
使用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) })) });注意：请阅读标签上的警告。