Vue 3 中 toRaw 的用法详细讲解

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"}

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 }

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

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);

<template>
  <div>obj.foo: {{ obj.foo }}</div>
</template>
<script setup>
import { reactive, toRaw } from 'vue'
const obj = reactive({ foo: '更新前数据 hello' })
const raw = toRaw(obj)
setTimeout(() => {
  raw.foo = '更新后数据 hi'
  console.log('obj.foo', obj.foo) // "更新后数据 hi"（原始对象和响应式对象指向同一内存地址）
})
</script>

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

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); // 获取原始数组
      raw.push({ id: raw.length + 1, name: 'Angular' });
      console.log('raw', raw);
    };
    return () => (
      <div>
        <h1>技术栈</h1>
        <ul>
          {state.items.map((item) => (<li key={item.id}>{item.name}</li>))}
        </ul>
        <button onClick={addRawItem}>添加项</button>
      </div>
    );
  },
});