Vue，组合 API：如何从反应式转换中跳过深度嵌套属性？

Question

在vue-composition-api中：使用 reactive() 方法，我想保留对象的一部分作为参考。

我有一些产品，是定制的class:

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 保留对原始产品的引用。

我不需要产品本身的反应性，因为它们是不变的。（这是一个electron app，只要程序运行，内容是不变的）

我只想对订单有反应。

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

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

Vue，组合 API：如何从反应式转换中跳过深度嵌套属性？

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

vue.js

vuejs3

vue-composition-api

Vue，组合 API：如何从反应式转换中跳过深度嵌套 属性？

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

vue.js

vuejs3

vue-composition-api

Vue，组合 API：如何从反应式转换中跳过深度嵌套属性？