reactive, ref, unref, toRaw, markRaw, toRefs 转换

<!--
 * @Author: 夜色中的星空 1141950132@qq.com
 * @Date: 2024-01-09 11:11:19
 * @LastEditors: 夜色中的星空 1141950132@qq.com
 * @LastEditTime: 2024-02-08 11:38:39
 * @FilePath: \clears-web\src\views\refundPaymentSettlement\backUpTransactionQueryIssuer\backUpTransactionQueryIssuer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-box" p-t-0>
    <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>
  </div>
</template>

<script setup lang="ts" name="refundPaymentSettlement:returnTransactionQueryIssuer">
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>
@/components/tablev2