• toRaw() 作用是将一个由 reactive 生成的响应式对象转为普通对象，作用类似于返回最原始的对象

<template>
  <div class="App">
    <p>年龄是：{
   { age }}</p>
    <p>爱好是：{
   { hobby.sing }}</p>
    <button @click="age++">改变年龄</button>
    <button @click="showFormer">查看最原始的person</button>
  </div>
</template>
​
<script>
import { reactive, toRaw, toRefs } from 'vue'
​
export default {
  name: 'App',
  setup() {
    let person = reactive({
      age: 24,
      hobby: {
        sing: '唱',
        dance: '跳',
      },
    })
    function showFormer() {
      let p = toRaw(person)
      console.log(p) // {age: 24, hobby: {…}}  是最原始的对象，不是处理后的响应式的
    }
    return { ...toRefs(person), showFormer }
  },
}
</script>

• markRaw 作用是标记一个对象，使其永远不会再成为响应式对象

• 应用 ： 有些值不应该设置为响应式的，例如复杂的第三方库。可以使用这个，提高性能优化

<template>
  <div class="App">
    <p v-show="person.skill">爱好是：{
   { person.skill }}</p>
    <button @click="add">添加一个属性</button>
    <button @click="changeSkill">改变爱好</button>
  </div>
</template>
​
<script>
import { reactive, markRaw, toRefs } from 'vue'
​
export default {
  name: 'App',
  setup() {
    let person = reactive({
      hobby: {
        sing: '唱',
        dance: '跳',
      },
    })
    function add() {
      let skill = {
        sing: '唱',
        dance: '跳',
      }
      // markRaw() 定义的数据，永远不会再有响应式了
      person.skill = markRaw(skill)
    }
    // 发现是修改不了的
    function changeSkill() {
      person.skill = {
        rap: 'rap',
        ball: '篮球',
      }
    }
    return {
      // 这个返回的只是原始数据的响应式，不包含后来添加的
      ...toRefs(person),
      add,
      // 要调用后来添加的skill，还带把person返回出去
      person,
    }
  },
}
</script>