请问vue 直接用this.属性名访问 data里的数据，出现 proxy 这东西，是什么原因，如何解决呢？

Question

或者我怎样访问target里的数据属性呢？ 或者如何解决这个问题

补充问题：

非常感谢大家的热心回答，现在的问题主要是整个项目的代码 都是直接this.属性的方式 取值和赋值的，这样的方法其实打包后放在线上是不会有问题的， 但是关键问题是，我本地无法进行调试了，必须把取值和赋值方法都进行修改了，包括给接口传的参数，请问大家 平时工作中没有遇到类似问题吗，本地如何调试才最方便呢，

Answer 1

我把代码重现了一遍, 你看看是不是你的解决办法
代码

export default {
  data() {
    return {
      string: '我没有病,我只有药',
      data: {
        name: '王大锤',
      },
    };
  },
  //  create vite
  created() {
    console.log('this -- ', this);
    console.log('this.stying -- ', this.string);
    console.log('this.data -- ', this.data);
    console.log('this.data.name -- ', this.data.name);
    let deconstruct = {...this.data};// 解构 data 数据出来的数据会脱离响应式
    console.log('deconstruct -- ', deconstruct);
  },
};

控制台效果

第三行的控制台和你遇到的情况是一样的, 可能没打印出来是你的字段错误了,再确认一下,
想要解除这个 proxy 劫持模式,解构出来就可以了

Answer 2

你用的应该是vue3
proxy是原对象obj的代理对象
从你的截图上看 handler可以理解为vue定义的拦截器，target是原对象。
问题1：怎么拿到代理对象this.xxx上的某个值
vue定义了默认拦截器的getter 也就是说理论上你this.xxx.page是能访问到原始对象上的page属性也就是1

如果你访问不到 可能你这个this.xxx自定义了getter 不让访问或者返回的不是原本的东西。
那么可以参考问题2 直接拿到this.xxx的原始对象，然后再通过.page取page值

问题2：怎么拿到代理对象this.xxx的原对象
vue专门提供了一个方法交toRaw 可以拿到代理对象的原始对象。从源码上看实际取的是__v_raw属性

export const enum ReactiveFlags {
  ...
  RAW = '__v_raw'
}
export function toRaw<T>(observed: T): T {
  const raw = observed && (observed as Target)[ReactiveFlags.RAW]
  return raw ? toRaw(raw) : observed
}

所以你可以用 this.xxx.__v_raw 或者 toRaw(this.xxx)拿到原对象

Answer 3

这是代理对象 把他当对象取值就行了

Answer 4

this.data.page 这样直接访问

Answer 5

请放出关键部分的代码。你这样没办法判断是啥问题。

取值部分的代码
赋值部分的代码

Answer 6

data.get('page')这样的呢