vue3中toRaw 与 markRaw

最新推荐文章于 2025-10-24 13:32:07 发布

原创

最新推荐文章于 2025-10-24 13:32:07 发布 · 1.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #前端框架 #typescript #开发语言 #ecmascript

本文介绍了Vue中的`toRaw`和`markRaw`方法，用于处理不需响应式追踪的对象。toRaw用于临时读取非代理数据，而markRaw则标记对象使其永不转换为代理，适用于性能优化和处理复杂第三方类实例。

· toRaw

返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。

这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发界面更新。

· markRaw

标记一个对象，使其永远不会转换为代理。返回对象本身

应用场景:

有些值不应被设置为响应式的，例如复杂的第三方类实例或 Vue 组件对象。

当渲染具有不可变数据源的大列表时，跳过代理转换可以提高性能。

toRaw：

<template>
  <div style="font-size: 14px">
    <h2>{
  
  { state.name }}</h2>
    <h2>{
  
  { state.age }}</h2>
    <hr />
    <button @click="update">更新</button>
    <button @click="testToRaw">测试toRaw更新</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw } from "vue";
// vue3.0版本语法
export default defineComponent({
  setup() {
    const state = reactive({
      name: "张三",
      age: 25,
    });

    const update = () => {
      state.name += "--"; // 界面更新
    };

    const testToRaw = () => {
      // 临时读取得到代理对象代理的目标数据对象
      const user = toRaw(sta