如何获取Vue Object的属性值数组？Object.values无效问题咨询

我太懂这个坑了！Vue2为了实现响应式数据绑定，会把data里的对象属性全部转换成带有getter和setter的形式，这时候如果直接用Object.values()去操作经过响应式包装的对象，要么拿到一堆不是你想要的内容，要么看起来就是没生效——本质是你操作的对象已经不是最初的普通对象了。

给你几个靠谱的解决方案：

• 直接访问$data里的原始对象
  Vue实例的$data属性存着未被Vue自身方法、属性覆盖的原始data数据，你可以从这里拿到目标对象再用Object.values()：

  // 假设你的data里定义了targetObj这个对象
  const valueArray = Object.values(this.$data.targetObj);
  

• 获取原始普通对象（内部方法，谨慎用在生产环境）
  如果你需要操作的是已经被响应式包装的对象，可以用Vue内部的toRaw方法拿到它的原始版本：

  import Vue from 'vue';
  const rawObject = Vue.util.toRaw(this.targetObj);
  const valueArray = Object.values(rawObject);
  

• 用循环手动收集属性值
  如果不想依赖Vue的内部方法，也可以用普通的for...in循环，记得过滤掉原型链上的属性：

  const valueArray = [];
  for (const key in this.targetObj) {
    if (this.targetObj.hasOwnProperty(key)) {
      valueArray.push(this.targetObj[key]);
    }
  }
  

简单说下原理：Vue通过Object.defineProperty劫持对象属性时，会给对象添加额外的观察者属性（比如__ob__），并且调整了属性的枚举特性。直接对响应式对象用Object.values()时，可能会混入这些额外内容，或者因为getter的特性导致你误以为没拿到值——其实用上面的方法绕开响应式包装就能解决啦！

内容的提问来源于stack exchange，提问作者nagy.zsolt.hun