快捷導(dǎo)航

Vue 3 中 toRaw 的用法詳細(xì)講解

更新時(shí)間：2024年11月21日 11:27:58 作者：代碼里的小貓咪

`toRaw` 是 Vue3 提供的一個(gè) API,用于獲取響應(yīng)式對(duì)象的原始非響應(yīng)式對(duì)象,主要用于調(diào)試、與第三方庫(kù)兼容以及避免無(wú)限遞歸更新等場(chǎng)景,使用時(shí)需要注意不要濫用,以免破壞響應(yīng)式系統(tǒng),感興趣的朋友跟隨小編一起看看吧

1. toRaw 的作用

1、獲取原始對(duì)象

當(dāng)對(duì)象被 Vue 的響應(yīng)式系統(tǒng)包裹時(shí)，直接訪問(wèn)它會(huì)返回一個(gè) Proxy 對(duì)象。如果需要訪問(wèn)未被響應(yīng)式系統(tǒng)代理的原始對(duì)象，可以使用 toRaw。

2、調(diào)試輔助

在調(diào)試時(shí)，如果響應(yīng)式對(duì)象出現(xiàn)了意料之外的行為，toRaw 可以幫助我們查看原始數(shù)據(jù)。

3、與第三方庫(kù)兼容

某些第三方庫(kù)不支持 Vue 的響應(yīng)式對(duì)象（Proxy 對(duì)象），這時(shí)可以通過(guò) toRaw 將響應(yīng)式對(duì)象轉(zhuǎn)為普通對(duì)象傳遞給它們。

2. toRaw 的用法

2.1 基本語(yǔ)法

import { reactive, toRaw } from 'vue';
const reactiveObj = reactive({ foo: 'bar' });
const rawObj = toRaw(reactiveObj);
console.log(reactiveObj); // Proxy {foo: "bar"}
console.log(rawObj); // {foo: "bar"}

2.2 使用場(chǎng)景

1、獲取原始對(duì)象進(jìn)行對(duì)比或操作

響應(yīng)式對(duì)象中的 Proxy 包裹可能會(huì)導(dǎo)致意外行為，比如在比較對(duì)象時(shí)。

import { reactive, toRaw } from 'vue';
const reactiveObj = reactive({ a: 1 });
const rawObj = toRaw(reactiveObj);
// 比較原始對(duì)象
console.log(rawObj === reactiveObj); // false
console.log(rawObj == { a: 1 }); // false
// 使用原始對(duì)象
const anotherObj = { ...rawObj }; // 拷貝原始對(duì)象
console.log(anotherObj); // { a: 1 }

2、Debug 或日志記錄

為了避免調(diào)試時(shí)輸出 Proxy 對(duì)象，可以用 toRaw 獲取原始數(shù)據(jù)。

import { reactive, toRaw } from 'vue';
const state = reactive({ count: 0 });
function logState() {
  console.log('State:', toRaw(state));
}
state.count++;
logState(); // 輸出：State: { count: 1 }

3、防止無(wú)限遞歸更新

在某些情況下（如遞歸處理響應(yīng)式對(duì)象），直接操作響應(yīng)式數(shù)據(jù)可能會(huì)導(dǎo)致不必要的額外開銷或無(wú)限遞歸，使用 toRaw 可以避免這些問(wèn)題。

import { reactive, toRaw } from 'vue';
const data = reactive({ nested: { value: 1 } });
function process(obj) {
  const raw = toRaw(obj); // 獲取原始對(duì)象
  console.log(raw); // { value: 1 }
}
process(data.nested);

3. 注意事項(xiàng)

1、toRaw 不會(huì)脫離響應(yīng)式系統(tǒng)

使用 toRaw 獲取原始對(duì)象后，對(duì)原始對(duì)象的修改不會(huì)觸發(fā) Vue 的響應(yīng)式更新，但對(duì)原始對(duì)象的修改仍會(huì)觸發(fā)更新。

??

<template>
  <div>obj.foo: {{ obj.foo }}</div>
</template>
<script setup>
import { reactive, toRaw } from 'vue'
const obj = reactive({ foo: '更新前數(shù)據(jù) hello' })
const raw = toRaw(obj)
setTimeout(() => {
  raw.foo = '更新后數(shù)據(jù) hi'
  console.log('obj.foo', obj.foo) // "更新后數(shù)據(jù) hi"（原始對(duì)象和響應(yīng)式對(duì)象指向同一內(nèi)存地址）
})
</script>

2、不要濫用 toRaw

- toRaw 應(yīng)用于特定場(chǎng)景，如與第三方庫(kù)交互或調(diào)試時(shí)。一般情況下，應(yīng)盡量使用響應(yīng)式數(shù)據(jù)。

- 濫用 toRaw 可能破壞 Vue 的響應(yīng)式系統(tǒng)，導(dǎo)致不可預(yù)測(cè)的行為。

3、原始對(duì)象不能被 reactive 再次代理

如果對(duì)原始對(duì)象應(yīng)用 reactive，Vue 會(huì)返回其原始的響應(yīng)式對(duì)象，而不是重新代理它。

??

import { reactive, toRaw } from 'vue'
const obj = reactive({ foo: 'bar' })
const raw = toRaw(obj)
const newReactive = reactive(raw)
console.log(newReactive === obj) // true

4、只對(duì)響應(yīng)式對(duì)象有效

如果傳入的不是響應(yīng)式對(duì)象，toRaw 會(huì)直接返回原對(duì)象。

import { toRaw } from 'vue'
const plainObj = { foo: 'bar' }
console.log(toRaw(plainObj) === plainObj) // true

完整示例 ??

import { defineComponent, reactive, toRaw } from 'vue';
export default defineComponent({
  setup() {
    const state = reactive({
      items: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
      ],
    });
    const addRawItem = () => {
      const raw = toRaw(state.items); // 獲取原始數(shù)組
      raw.push({ id: raw.length + 1, name: 'Angular' });
      console.log('raw', raw);
    };
    return () => (
      <div>
        <h1>技術(shù)棧</h1>
        <ul>
          {state.items.map((item) => (<li key={item.id}>{item.name}</li>))}
        </ul>
        <button onClick={addRawItem}>添加項(xiàng)</button>
      </div>
    );
  },
});

展示為：