vue3里深拷贝 的使用场景是什么

在 Vue 3 中，深拷贝同样适用于避免引用类型数据共享、处理响应式数据和状态管理等场景，和 Vue 2 中的使用场景类似。不过，Vue 3 中提供了一个新的 API `markRaw`，它可以用来标记一个对象，使其在进行深拷贝时不被拷贝，从而可以提高深拷贝的效率。

以下是一些使用深拷贝的场景示例：

1. 避免引用类型数据共享：

const obj = { name: 'vue', version: 3 }
const arr = [obj]
const copyArr = JSON.parse(JSON.stringify(arr)) // 深拷贝

copyArr[0].name = 'react'

console.log(arr[0].name) // 'vue'
console.log(copyArr[0].name) // 'react'

2. 处理响应式数据：

import { reactive } from 'vue'

const state = reactive({
  name: 'vue',
  version: 3
})

const copyState = JSON.parse(JSON.stringify(state)) // 深拷贝

copyState.name = 'react'

console.log(state.name) // 'vue'
console.log(copyState.name) // 'react'

3. 状态管理：

import { reactive } from 'vue'

const state = reactive({
  name: 'vue',
  version: 3
})

const copyState = JSON.parse(JSON.stringify(state)) // 深拷贝

copyState.name = 'react'

console.log(state.name) // 'vue'
console.log(copyState.name) // 'react'

需要注意的是，在使用深拷贝时，如果被拷贝的对象中有循环引用，就会导致栈溢出的错误，这时需要使用其他的解决方案，比如手动遍历对象进行拷贝。而使用 `markRaw` 可以避免对整个对象进行深拷贝，提高效率。