Vue toRaw() 简介

toRaw(<Object>) 

说明：返回响应式对象原始对象

代码说明：

const foo = {}  // 这是原始对象
const reactiveFoo = reactive(foo) // reactiveFoo 是响应式对象，foo是原始对象

console.log(toRaw(reactiveFoo) === foo) // true 表示toRaw（reactiveFoo）返回的是foo对象

 

实验扩展：

一、toRaw不应该用在ref的实例，因为它仍返回原响应式对象

<script setup>
    import {
        ref,       
        isRef,
        toRaw
    } from 'vue'


    const oldRefValue = 0
    const refObj = ref(oldRefValue)
    const rawRef = toRaw(refObj)
    console.log(isRef(rawRef)); // 打印结果是 true
</script>

 

二、toRaw用在reactive实例上

<script setup>
    import {     
        reactive,     
        isReactive,
        toRaw
    } from 'vue'


    const oldReactiveValue = {
        a: 1,
        b: 2
    }
    const reactiveObj = reactive(oldReactiveValue)
    const rawReactive = toRaw(reactiveObj)
    console.log(isReactive(rawReactive)); // 打印结果是 false
    console.log(rawReactive); // 打印结果是： {"a":1,"b":2}  即返回了 oldReactiveValue
</script>