13.0 vue3 toRaw&markRaw

上一篇：

vue3 readonly&shallowReadonlyhttps://blog.csdn.net/qq_42543244/article/details/122772194本片继续记录vue3的新特性 toRaw & markRaw

简单来说，toRaw：返回 reactive 或 readonly 代理的原始对象，当我们去改变原始对象，页面是不是刷新的，因为数据不是proxy响应式代理的。

markRaw：去标记一个对象，让它永远不会转换为proxy；

示例：

<template>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>爱好：{{ hobby }}</h2>
  <h2>工作薪酬：{{ job.j1.money }} K</h2>
  <h2>身份信息：{{ data.message }}</h2>
  <button @click="name = '李四'">改变姓名</button>
  <button @click="age += 1">改变年龄</button>
  <button @click="hobby[1] = '看比赛'">改变爱好</button>
  <button @click="job.j1.money += 1">改变薪酬</button>
  <button @click="getOriginalData">获取原始数据</button>
  <button @click="addPersonMessage">添加身份信息</button>
  <button @click="changePersonMessage">修改身份信息</button>
</template>

<script>
import { markRaw, reactive, toRaw, toRefs } from "vue";
/* 
  toRaw:
    返回 reactive 或 readonly 代理的原始对象。这是一个“逃生舱”，可用于临时读取数据而无需承担代理访问/跟踪的开销，
    也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用。
    使用场景：用于读取响应式对象对应的普通对象，对这个普通对象进行的所有操作都不会引起页面的更新
  markRaw:
    标记一个对象，使其永远不会转换为 proxy。返回对象本身
    应用场景：
      1.有些值不应该去设置成响应式的，比如第三方的类库
      2.当需要去渲染不可变的大量数据源时，跳过响应式转换可以获得更好的性能

*/
export default {
  name: "Demo",
  setup() {
    let data = reactive({
      name: "张三",
      age: 18,
      hobby: ["打篮球", "听音乐", "玩游戏"],
      job: {
        j1: {
          money: 10,
        },
      },
    });
    function getOriginalData() {
      let originalData = toRaw(data);
      originalData.age++; //originalData的age一直在变化，但是页面不会有任何变化
      console.log(originalData);
    }

    // 这里我们想要去添加一个人的身份信息,身份证信息，我们的身份证号肯定是永远不变的吧！
    function addPersonMessage() {
      // data.message = { idNumber: "411121199711111234" };
      // 对一个对象进行markRaw标记，让这个对象永远不会成为proxy
      data.message = markRaw({ idNumber: "411121199711111234" });
    }

    function changePersonMessage() {
      data.message.idNumber = "41112119971111123X";
    }

    return {
      data,  
      ...toRefs(data),
      getOriginalData,
      addPersonMessage,
      changePersonMessage,
    };
  },
};
</script>

下一篇：

vue3 customRef的使用https://blog.csdn.net/qq_42543244/article/details/122815091