reactive 和 ref 来回切换 { reactive, ref, unref, toRaw, toRefs} 关系

html 部分

<template>
   <div>      <div>        <div>          <br />          <p>全部数据{{ person }}</p>          <p>原始数据rawPerson{{ rawPerson }}</p>          <p>原始数据 rawPerson{{ rawPerson2 }}</p>          <div>原始数据 rawPerson3 {{ rawPerson3 }}</div>          <el-button type="primary" @click="person.name = '拜登'"> 换名字          </el-button>          <el-button @click="aaa">换手机</el-button>          <el-button @click="fun">动态方法</el-button>          <el-button @click="bbb">toRaw 普通不关联方法</el-button>          <el-button @click="mmm">toRef响应对象</el-button>          <el-button @click="nnn">nnn响应对象</el-button>        </div>      </div>      <div>        <div>objRef</div>        <p>全部数据{{ obj }}</p>        <p>全部数据{{ objToRef }}</p>        <p>全部数据{{ objToRef1 }}</p>        <p>全部数据{{ objToRef2 }}</p>        <div>          <el-button @click="ccc">普通对象响应对象Proxy</el-button>          <el-button @click="ddd">普通对象没有响应对象</el-button>          <el-button @click="eee">变回响应对象ref</el-button>          <el-button @click="fff">toRe换了普通对象响应数据</el-button>        </div>      </div>    </div></template>



js 部分



<script setup lang="ts">

import { reactive, ref, unref, toRaw, markRaw, toRefs, onActivated, onMounted } from 'vue'let formRulesRef = ref<FormInstance>()let person = reactive<any>({  name: "川建国",  age: "74",  addres: ""});let rawPerson = toRaw(person) // 转换为 普通(Object)let rawPerson2 = toRaw(person) // 转换为 普通(Object)let rawPerson3 = toRefs(person) // 响应式的 普通(Object)console.log("原始数据", person);console.log("原始数据 rawPerson", rawPerson);console.log("原始数据 rawPerson2", rawPerson2);console.log("原始数据 rawPerson3", rawPerson3);function aaa() {  rawPerson.name = "换手机"  console.log(person, "原始");  console.log(rawPerson, "换手机");}function fun() {  rawPerson = reactive(rawPerson) // 转化为 reactive 响应对象  person.name = "拼多多"  console.log(person, "原始数据");  console.log(rawPerson, "rawPerson 数据");}function bbb() {  Reflect.deleteProperty(rawPerson2, 'addres')  rawPerson2.name = "换手机"  console.log(person, "原始数据");  console.log(rawPerson2, "rawPerson2 数据");}function mmm() {  rawPerson3.name.value = "toRef响应"  console.log(person, "原始数据");  console.log(rawPerson, "rawPerson 数据");  console.log(rawPerson3, "rawPerson3 数据");}function nnn() {  person.name = "原始类型改变"  person.addres = "西安"  console.log(person, "原始数据");  console.log(rawPerson3, "rawPerson3 数据");}let obj = ref<any>({  name: "川建国",  age: "74",});let objToRef = unref(obj) // 转换为 Proxy(Object) let objToRef1 = toRaw(objToRef)  // 转换为 普通(Object)let objToRef2 = ref(objToRef1) // 转换为 ref(Object) let objToRef3 = toRefs(objToRef) // 响应式的 普通(Object)console.log("原始数据", obj);console.log("原始数据 objToRef toRaw", objToRef);console.log("原始数据 objToRef1 ref", objToRef1);console.log("原始数据 objToRef2", objToRef2);console.log("原始数据 objToRef3", objToRef3);function ccc() {  objToRef.name = "普通对象响应对象"  console.log(obj, "原始数据");  console.log(objToRef, "objToRef数据");}function ddd() {  objToRef1.name = "普通对象没有响应对象"  console.log(obj, "原始数据");  console.log(objToRef1, "objToRef1数据");}function eee() {  objToRef2.value.name = "变回响应对象ref"  console.log(obj, "原始数据");  console.log(objToRef2, "objToRef2数据");}function fff() {  objToRef3.name.value = "更换了普通对象响应数据"  console.log(obj, "原始数据");  console.log("原始数据 objToRef3", objToRef3);}


</script>