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

原创

彭世瑜 2023-07-16 00:02:22 博主文章分类：Vue ©著作权

文章标签 vue.js javascript 前端 JSON 字符串 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

版本环境

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