Vue3：toRaw与markRaw

目录

一.toRaw

1.性质

2.作用

二.markRaw

1.性质

2.作用

三.toRaw的使用

四.markRaw的使用

五.代码示例

在Vue 3中，toRaw和markRaw是两个用于处理响应式对象的全局函数。

一.toRaw

1.性质

toRaw是一个全局函数，它接受一个由reactive或ref生成的响应式对象，并返回该对象的原始非代理版本。

2.作用

使用toRaw可以绕过响应式系统的拦截，直接访问对象的原始状态。这对于需要临时读取对象的原始值而不触发代理机制的情况非常有用。例如，当您需要与不理解Vue响应性系统的第三方库交互时，可以使用toRaw来获取对象的原始数据。

二.markRaw

1.性质

markRaw也是一个全局函数，它标记一个对象，使其永远不会被转换为响应式代理。

2.作用

通过使用markRaw，您可以确保某些对象不会被Vue的响应性系统跟踪，从而减少不必要的性能开销。这对于标记那些不需要响应性的对象（如静态配置或缓存数据）非常有用。

三.toRaw的使用

当修改person对象的name属性时，由于它是响应式的，所以界面上显示的名字会立即更新。但是，当尝试修改rawPerson对象的name属性时，界面上显示的名字不会发生变化，因为rawPerson已经被转换为了非响应式对象。

四.markRaw的使用

markRaw用于标记一个对象，使其永远不会被转换为响应式代理。在这个例子中，car1是一个原始对象，使用markRaw进行标记，而car2是通过reactive函数创建的响应式对象。

五.代码示例

<template>
    
  <h2>对象1:{{ person }}</h2>
  <h2>对象2:{{ rawPerson }}</h2>
  <h2>汽车1:{{ car1 }}</h2>
  <h2>汽车2:{{ car2 }}</h2>

  <button @click="changName1">修改名字1</button>
  <button @click="changName2">修改名字2</button>


  <span></span>
</template>

<script lang="ts" setup name="App">

import { reactive,toRaw,markRaw,isReactive, ref } from "vue";
   
   // 响应式对象
   let person = reactive({name:'小明',age:18})
   // 原始对象
   let rawPerson = toRaw(person)

   function changName1(){
    person.name = 'tim'
   }

   function changName2(){
    rawPerson.name = 'pp'
   }
   
   
   /* markRaw */
   let car1 = markRaw(
     {id:'1',brand:'宝马'},
   )

   let car2 = reactive(car1)

</script>
  
<style>
button{
  width: 150;
  height: 40;
}
  
</style>