vue3的toRaw和markRaw

1：toRaw: 将一个由reactive生成的响应式对象转为普通对象、操作值改变但是视图不更新，toRaw对ref无效
使用toRaw包裹的reactive赋值给一个变量 修改这个变量的时候原reactive对象的值还是会互相影响的
2：markRaw标记一个对象 使其永远不在成为一个响应式对象 当修改这个值的时候还是可以改变但是界面不会更新
但我们想往reactive对象下插入一条不需要响应式的对象的时候使用

toRaw操作reactive数据

toRaw操作ref数据

<template>
  <div>person对象{
    
    {
    
     person }}</div>
  <button @click="toRawReactive">
    使用toRaw修改reactive下age++--值是: {
    
    {
    
     person.age }}
  </button>
  <button @click="toRawRef">使用toRaw修改ref下sum--值是:{
    
    {
    
     sum }}</button> 
</template>

  <script setup>
// toRaw: 将一个由reactive生成的响应式对象转为普通对象、操作值改变但是视图不更新，toRaw对ref无效
// markRaw标记一个对象 使其永远不在成为一个响应式对象 当修改这个值的时候还是可以改变但是界面不会更新
import {
    
     ref, reactive, toRaw, markRaw } from "vue";
let sum = ref(1);
let person = reactive({
    
    
  name: "ltsme",
  age: 18,
  job: {
    
    
    job1: {
    
    
      salary: 100,
    },
  },
});
const toRawReactive = () => {
    
    
  let p = toRaw(person);
  p.age++;
  console.log(p.age, "p");
  console.log(person.age, "person");
};
const toRawRef = () => {
    
    
  let p = toRaw(sum);
  p.value++;
  console.log(p.value, "toRawRef--p");
  console.log(sum.value, "toRawRef--sum");
};  
</script>
  
  <style lang="scss" scoped>
</style>

markRaw的使用

 
<template>
  <div>person对象{
    
    {
    
     person }}</div>
   
  <button @click="noaddcars">
    不使用markRaw添加card--值是:{
    
    {
    
     person.card ? person.card.name : "" }}
  </button>
  <button @click="addcars">
    markRaw添加card--值是:{
    
    {
    
     person.card ? person.card.name : "" }}
  </button>
  <button @click="addcars11">
    markRaw修改card--值是:{
    
    {
    
     person.card ? person.card.name : "" }}
  </button>
</template>
  
  <script setup>
// toRaw: 将一个由reactive生成的响应式对象转为普通对象、操作值改变但是视图不更新，toRaw对ref无效
// markRaw标记一个对象 使其永远不在成为一个响应式对象 当修改这个值的时候还是可以改变但是界面不会更新 初次添加的时候会显示一次
import {
    
     ref, reactive, toRaw, markRaw } from "vue";
let sum = ref(1);
let person = reactive({
    
    
  name: "ltsme",
  age: 18,
  job: {
    
    
    job1: {
    
    
      salary: 100,
    },
  },
}); 
function noaddcars() {
    
    
  let cardsss = {
    
     name: "奔驰" };
  person.card = cardsss;
  console.log(person.card.name, "person");
}

function addcars() {
    
    
  let cardsss = {
    
     name: "奔驰" };
  person.card = markRaw(cardsss);

  console.log(person.card.name, "person");
}
function addcars11() {
    
    
  person.card.name = "99999"; //这里加个判断 存在person 我数字按键坏了就不加了
  console.log(person.card.name, "person");
}
</script>
  
  <style lang="scss" scoped>
</style>