1. roRaw

作用： 将一个由reactive生成的响应式对象转化为普通对象。
使用场景： 用于读取响应式对象对应的普通对象， 这个普通对象的所有操作， 不会引起页面的更新。

<script>
import { reactive, toRefs, shallowReadonly, toRaw } from 'vue'
export default {
  setup() {
    let person = reactive({
      name:'IRIC',
      age:12,
      sex:'女',
      job:{
        salery:20
      },
      address:''
    })
    const p = toRaw(person)
    console.log(p) //{name: 'IRIC', age: 12, sex: '女', job: {…}, address: ''}
    return { ...toRefs(person)  }
  },
}
</script>

2. markRaw

作用：标记一个对象， 使其永远不会称为响应式对象。
应用场景：
当有些值不应该被设置为响应式的， 例如复杂的第三方类库等待；
当渲染具有不可变数据源的大列表时， 体哦爱国响应式转换可以提高性能。

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>性别:{{sex}}</h2>
  <h2>薪资:{{job.salery}}</h2>
  <hr>
  <button @click="name += '@'">修改姓名</button>
  <button @click="age ++">修改年龄</button>
  <button @click="job.salery ++">修改薪资</button>
  <h2>当前的值：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <hr>
  <h2>{{person.car}}</h2>
  <button @click='addCar'>加一台车</button>
  <button @click="changeCarName">修改车名</button>
</template>
<script>
import { reactive, toRefs, shallowReadonly, toRaw, markRaw } from 'vue'
export default {
  setup() {
    let person = reactive({
      name:'IRIC',
      age:12,
      sex:'女',
      job:{
        salery:20
      },
      address:''
    })
    const p = toRaw(person)
    console.log(p) //{name: 'IRIC', age: 12, sex: '女', job: {…}, address: ''}
    function addCar(){
      person.car = markRaw({
        name:'奔驰',
        price:40
      })
      //
      console.log(person)
      //加了car属性之后， 自动就会变为响应式的， 因为对象借用了proxy代理。能够捕获对象的任何一个操作。
      //如果car属性不想变为响应式的， 那么可以使用markRaw. car属性永远不会是响应式的。
      // 详单于在一个proxy对象上面， 有一个属性不是响应式的。
    }
    function changeCarName(){
      person.car.name += '@'
      console.log(person.car)
    }
    //需要把person暴露出来，因为setup只会执行一次， 当添加一辆车之后， 不会再次执行， 所以需要把person报出路来。
    return { person,...toRefs(person),addCar, changeCarName  }
  },
}
</script>