toRaw 和 markRaw

toRaw函数

<template>
  <div>当前求和为 {{sum}}</div>
  <div>{{name}} --- {{age}} --- {{job.j1.salary}}</div>
  <div>
    <button @click="name+='~'">改名</button>
    <button @click="age++">增加年龄</button>
    <button @click="job.j1.salary+=10">增加工资</button>
    <button @click="showRawPerson">查看person添加响应式之前的样子</button>
  </div>
</template>

<script>
import {reactive, ref, toRefs, toRaw, } from 'vue'
export default {
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 3000
        }
      }
    })
    function showRawPerson() {
      let p = toRaw(person)
      console.log(p)
    }
    let sum = ref(0)
    return {
      sum,
      ...toRefs(person),
      showRawPerson
    }
  }
}
</script>

• 返回一个  reactive 转换为响应式对象以前的原始对象

markRaw函数

<template>
  <div>当前求和为 {{sum}}</div>
  <div>{{name}} --- {{age}} --- {{job.j1.salary}} --- {{car}}</div>
  <div>
    <button @click="name+='~'">改名</button>
    <button @click="age++">增加年龄</button>
    <button @click="job.j1.salary+=10">增加工资</button>
    <button @click="showRawPerson">查看person添加响应式之前的样子</button>
    <button @click="addCar">给人添加一台车</button>
    <button @click="car.name+='~'">换车名</button>
  </div>
</template>

<script>
import {reactive, ref, toRefs, toRaw, markRaw, } from 'vue'
export default {
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 3000
        }
      },
      car: {},
    })
    function showRawPerson() {
      let p = toRaw(person)
      console.log(p)
    }
    let sum = ref(0)
    function addCar() {
      let car = {name: '大众', price: 66666}
      person.car = markRaw(car) // 现在 person.car中的所有属性都没有响应功能了
    }
    return {
      sum,
      ...toRefs(person),
      showRawPerson,
      addCar,
    }
  }
}
</script>

• 由于  person 对象被 reactive 添加了响应性， person 对象后续所有的属性都具有响应性， car 对象通过  markRaw 函数处理后添加到  person 响应对象上， car 属性不具有响应性