快捷導(dǎo)航

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

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

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

1. toRaw 的作用

1、獲取原始對象

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

2、調(diào)試輔助

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

3、與第三方庫兼容

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

2. toRaw 的用法

2.1 基本語法

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 使用場景

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

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

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

2、Debug 或日志記錄

為了避免調(diào)試時輸出 Proxy 對象，可以用 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、防止無限遞歸更新

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

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

3. 注意事項

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

使用 toRaw 獲取原始對象后，對原始對象的修改不會觸發(fā) Vue 的響應(yīng)式更新，但對原始對象的修改仍會觸發(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"（原始對象和響應(yīng)式對象指向同一內(nèi)存地址）
})
</script>

2、不要濫用 toRaw

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

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

3、原始對象不能被 reactive 再次代理

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

??

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

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

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

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}>添加項</button>
      </div>
    );
  },
});

展示為：