【vue3练习 -13】vue3使用toraw(),markRaw()

作用：将响应式数据变回原来的普通数据，提高效率、性能

使用场景：如果我们用reactive定义一个对象，他不管是多少层级的对象都是响应式的，假如我们将一个第三方的数据对象放入一个自己定义的对象里面，那么reactive会全部遍历每一层直到最深层次的数据全都变成响应式，如果我们使用toraw或者markRaw就可以防止放进去的那个对象不会变成响应式数据

api释义：toraw变成原始数据，markRaw标记为原始数据，raw（原始的）

截止发文前toraw（）对ref定义的数据无效，不会把他变回原始数据

使用：

<template>
  <div>
    <h1>{{ title }}</h1>
    <span
      >我叫{{ name }},今年{{ age }}岁，我有一部{{ brand }}手机，它是我从{{
        source
      }}购买的</span
    >
    <br />
    <p>全部数据{{ person }}</p>
    <p>原始数据{{ rawPerson }}</p>
    <p>原始数据ref{{ rawRef }}</p>
    <button @click="name = '拜登'">换名字</button>
    <button @click="brand = '小米'">换手机</button>
    <button @click="fun">方法</button>
  </div>
</template>

<script>
import { ref, reactive, toRefs, toRaw, markRaw } from "vue";
export default {
  name: "",
  setup() {
    let title = ref("为了自由");
    let person = reactive({
      name: "川建国",
      age: "74",
      phone: {
        brand: "华为",
        price: 5555,
        color: "黑色",
        channel: {
          source: "拼多多",
          country: "china",
        },
      },
    });
    let rawPerson = toRaw(person); //传入一个reactive响应式数据
    let rawRef = toRaw(title); //传入一个ref响应式数据
    console.log("原始数据", rawPerson); //打印最开始定义的数据普通对象
    console.log("原始数据ref", rawRef); //打印结果还是响应式的数据
    let obj = {name:'希拉里',age:79}
    person.obj = obj//往响应式的对象里面添加一个对象同样是响应式的
    person.obj = markRaw(obj)//往响应式的对象里面添加一个markRaw标记的对象，这个放入的对象将不再是响应式的
    function fun() {
      console.log("fun方法");
      person.obj.age++
    }
    return {
      title,
      ...toRefs(person),
      ...toRefs(person.phone),
      ...toRefs(person.phone.channel), 多层对象用法
      person,
      rawPerson,
      rawRef,
      fun,
    };
  },
};
</script>

<style lang="" scoped>
</style>