Vue3中，如何将响应式数据转化为非响应式？？

问题遇到的现象和发生背景

toRaw要怎么用？？不想影响数据值

用代码块功能插入代码，请勿粘贴截图

<template>
  <div>
    <button @click="test">pick mebutton>
    <div>{{ oldData }}div>
    <div>{{ newData }}div>
  div>
template>

<script setup>
import { ref, toRaw } from 'vue'

const oldData = reactive({
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3,
    },
  },
})

const newData = ref({})

function test() {
  newData.value = changeData(toRaw(oldData))
}

function changeData(data) {
  data.a = 101
  data.b.c = 102
  data.b.d.e = 103
  return data
}
script>

运行结果及报错内容

oldData： { "a": 101, "b": { "c": 102, "d": { "e": 103 } } }
newData：{ "a": 101, "b": { "c": 102, "d": { "e": 103 } } }

我想要达到的结果

oldData： { "a": 1, "b": { "c": 2, "d": { "e": 3 } } }
newData：{ "a": 101, "b": { "c": 102, "d": { "e": 103 } } }

• 这篇文章：为什么Vue3重写响应式系统？ 也许有你想要的答案，你可以看看

toRaw是返回代理的原始对象，返回的对象还是那个对象，其引用地址是一样的，你要做的是深拷贝一份

function test() {
  let data = JSON.parse(JSON.stringify(toRaw(oldData)))
  newData.value = changeData(data)
}