vue3中如何使响应式的proxy对象转换成非响应式

在官方文档中介绍的一个markRaw的api。
含义:标记一个对象,使其永远不会转换为 proxy。返回对象本身。
以下是官方文档代码说明

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// 嵌套在其他响应式对象中时也可以使用
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

利用markRaw实现响应式的proxy对象转换成非响应式

let foo = markRaw({}) //标记一个对象,使其永远不会转换为 proxy。返回对象本身。
let bar = reactive({ age: '90' }) //响应式的
Object.assign(foo, bar)
console.log(foo, 'foo') //非响应式 { age: '90' }

如果有其他更好的方法,欢迎指教

你可能感兴趣的:(vue3,javascript,前端,vue)