vue __ob__Observer 导致赋值失败

Question

vue __ob__  Observer 导致赋值失败

接口在created调用

赋值的时候需要把数据遍历然后赋值

我在接口请求中打印console.log(JSON.parse(JSON.stringify()))数据是没问题的

但是如果赋值  this.a* = JSON.parse(JSON.stringify(this.a)) 的时候还是没有改变  __ob__  Observer

导致在外部就无法使用到数据

Answer 1

该回答引用ChatGPT

ob 是 Vue 内部使用的一个属性，它用来实现 Vue 的响应式系统，当一个对象被 Vue 转换为响应式对象时，Vue 会在对象上添加 ob 属性，同时为对象的属性添加 getter 和 setter 方法，以便能够监听到属性变化并触发视图更新。

赋值操作应该是在对象被 Vue 转换为响应式对象之后进行的，如果在赋值操作之前打印对象，你会发现对象中并没有 ob 属性，因为此时对象还没有被 Vue 转换为响应式对象。所以，在进行赋值操作之前，你需要先将对象转换为响应式对象，可以通过调用 Vue 实例的 $set 或者 $watch 方法来实现。例如：

this.$set(this, 'a', JSON.parse(JSON.stringify(this.a)));

或者：

this.$watch(() => this.a, (newValue) => {
  this.a = newValue;
}, { deep: true });

这样做可以确保赋值操作能够成功修改对象的属性，并触发视图更新。