Subscribe on changes!

`structuredClone` api will produce an error if argument is reactive object

wontfix has workaround
avatar
ishowman
Aug 15th 2023

Vue version

all

Link to minimal reproduction

https://play.vuejs.org/#eNqtUstO3DAU/ZVbbzIjpY4GdtOA1FKktou2ait1gZGIkjvB4NiWHyEoyr9z42EGECNW7OzzsM99jOyztbyPyNas9LWTNoDHEO2p0LKzxgUYwWFVB9ljTqcNTLBxpoOMTJnQQtdG+wCdb+Fk5hfZN1TKwH/jVPMhW+4EUm/M6lEyCg0QZIdr+FoF5NrcLZb5DFbOVfdruFjlMM6ONSQt6GoWZ8Mw0J8A03Qp9PTi7aP09jboO39gFHJl2sVVg2jnSq9y8MHFOkSHzZkyGheE8r5SEZfLT0IXxWtfasABZ8KfeeGw9eiAdeScJ25KzrLYTpBmR5eAnVVUPN0AyuvV6TimKU1TWdAtoVLbGKD/2JkG1YlgxAtGVFns3SxnwVOkjWz5jTeaFiV1TLDadFYqdL9skBRZsF0viatoBe5+JIwyY2p98lxjfXsAv/HDjAn226FH16Ngey5UrsWwpc///sSBznuSkkdF6jfIP0jtjHPGrexL1A3FfqZLab+ndZe6/efPh4Da74qag6adSHrBaPHP3ij9Ke4xP04+2iQ2PQBkQyWE

Steps to reproduce

What is expected?

support data structure like Object in reactive variable.

What is actually happening?

Only basic data structure like string, number in reactive variable is supported by structuredClone api. Here are the example codes with errors:

const info1 = ref({
  time: Date.now(),
  array: [1, {info: {
   name: 'xxx'
  }}]
})
const info2 = reactive({
  time: Date.now(),
  array: [1, {info: {
   name: 'xxx'
  }}]
})

console.log(`deep info1`, structuredClone(info1.value));
 console.log(`deep info2`, structuredClone(info2));

System Info

No response

Any additional comments?

No response

avatar
edison1105
Aug 15th 2023

structuredClone does not support Proxy. see https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#supported_types

use structuredClone(toRaw(xxx)) instead.

avatar
LinusBorg
Aug 15th 2023

Closing as there's nothing to do on our side, really. Edison's recommendation is simple enough. We could ammend the docs though, the docs team over in vuejs/docs would certainly apprechiate this input.

GitHub Track