Vue, Composition API: How to skip deeply nested property from reactive conversion?-CodePudding

In the vue-composition-api: Using the reactive() method, I would like to keep parts of the object as a reference.

I have some products, which are of a custom class:

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

And a list of orders, which reference a product, in a deep object:

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

I checked via example.orders[0].product == chair -> false that these are different objects. I also found out that example.orders[0].product is not of type Product.

Since I can have lots of different orders and products contain much data, I would like that example.orders[].product stays a reference to the original product.

I do not require reactivity for the Products themselves, since these are constant. (This is an electron app, and the content will be constant for as long as the program runs)

I only would like to have reactivity for the orders.

CodePudding user response：

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

Note: please read the warning on the label.