Vue - toRaw 与 markRaw

一、toRaw

作用：

• 用于获取一个响应式对象的原始对象，toRaw 返回的对象不再是响应式的，不会触发视图更新。

使用场景：

• 在需要将响应式对象传递给非 Vue 的库或外部系统时，使用 toRaw 可以确保它们收到的是普通对象。

<template>
    <div class="person">
       <h3>姓名：{
  
  {person.name}}</h3>
       <h3>年龄：{
  
  {person.age}}</h3>
       <button @click="changeAge">修改年龄</button>
       <hr>
        <h3>姓名：{
  
  {rawPerson.name}}</h3>
       <h3>年龄：{
  
  {rawPerson.age}}</h3>
       <button @click="rawChangeAge">修改年龄</button>
    </div>
    
</template>
    
<script setup lang='ts' >
import { reactive, toRaw } from 'vue';

// person 是响应式数据
const person = reactive({
    name: 'Tom',
    age:20,
})
// rawPerson 原始数据
const rawPerson = toRaw(person)

// 对比
console.log('响应式数据',person);
console.log('原始数据',rawPerson);
// 响应式数据 可修改
const changeAge = () => {
    person.age += 1;
}
// 原始数据  不可修改
const rawChangeAge = () => {
    console.log('rawPerson中的age',rawPerson.age);
    rawPerson.age += 1;
}

</script>
<style scoped>

</style>

二、markRaw

作用：

markRaw 用于标记一个对象，使其在 Vue 的响应式系统中保持“原始状态”。这意味着被 markRaw 标记的对象在 Vue 的响应式逻辑中不会被代理，因此不会变为响应式对象。

即，标记一个对象，使其永远不会变成响应式的。

总结 

通过适当地使用 toRaw 和 markRaw，可以在开发过程中有效地管理 Vue 的响应式性和性能。