Vue：Vue3中的data数据对象获取真实值而不是Proxy代理对象

版本环境

Vue的版本

{
    
    
  "dependencies": {
    
    
    "vue": "3.2.47",
  }
}

采用选项式api风格

实现代码

Vue中，定义这样一个data数据域中的js对象

export default {
    
    
  data() {
    
    
    return {
    
    
      // object对象
      user: {
    
    
        name: 'Tom',
        age: 18,
      },
    }
  }
}

打印到控制台，默认输出的是Proxy代理对象

console.log(this.user)
// Proxy(Object) {name: 'Tom', age: 18}

如果想获取到原始的Object对象，而非Proxy代理对象，可以使用如下方式

方式一：使用toRaw 转为普通对象

toRaw()​：根据一个 Vue 创建的代理返回其原始对象。

方法签名

function toRaw<T>(proxy: T): T

使用

import {
    
     toRaw } from 'vue'


let rawUser = toRaw(this.user)

console.log(rawUser)
// {name: 'Tom', age: 18}

方式二：序列化为字符串再反序列化

function deepCopy(obj) {
    
    
  return JSON.parse(JSON.stringify(obj))
}

console.log(deepCopy(this.user))
// {name: 'Tom', age: 18}

完整代码

import {
    
     toRaw } from 'vue'

function deepCopy(obj) {
    
    
  return JSON.parse(JSON.stringify(obj))
}

export default {
    
    
  data() {
    
    
    return {
    
    
      // object对象
      user: {
    
    
        name: 'Tom',
        age: 18,
      },
    }
  },

  created() {
    
    
    console.log(this.user)
    // Proxy(Object) {name: 'Tom', age: 18}

    // 方式一：转为普通对象
    let rawUser = toRaw(this.user)
    console.log(rawUser)
    // {name: 'Tom', age: 18}

    // 方式二：序列化为字符串再反序列化
    console.log(deepCopy(this.user))
    // {name: 'Tom', age: 18}
  },
}

参考文章

1. https://cn.vuejs.org/api/reactivity-advanced.html#toraw
2. vue3中的对象时为proxy对象，如何获取值