有效地在对象文字中找到重复的数据属性？

Question

在使用 babel 在 Vue 中创建我们的新系统后，我开始测试对旧设备的兼容性。我们的 babel 正在将源代码与 webpack 一起转译为 es2015。

我现在已经用browserstack 对 Ios 和 android 进行了测试。较新的操作系统适用于两个平台。但是在使用默认浏览器的安卓手机上，I get an error in sentry 声明； Duplicate data property in object literal not allowed in strict mode 它没有给我任何暗示这可能导致调试过程非常困难。

我现在唯一能看到的隧道尽头的光是 ios 部分。运行 IOS Attempted to redefine property 'value'. also in sentry

如果我没记错的话，ios问题是同一个问题的改写错误？ 当我阅读over here 时，我想“值”可能在一个对象或元素中定义了两次。

这一切都结束了一个问题，如何找到重复的数据属性？

Answer 1

你能分享一些你的代码吗（只是几个组件的区域？）

要检查的一件事是在data() 内部，确保您返回的是一个对象。当我开始使用 Vue 时，这发生在我身上。

例子：

// component a
data () {
  a: ''
}

// component b 
data () {
  a: '' // ERROR! Duplicate
}

这是因为 data 被合并到主 Vue 实例上。所以在这种情况下，它应该看起来像：

// component a
data () {
  return {
    a: ''
  }
}

// component b 
data () {
  return {
    a: '' // ok now
  }
}

如果没有一些代码，很难做出任何其他猜测。

Answer 2

我在旧的 android 设备上报告了同样的问题，这就是我所做的：

我们的组件同时具有mapActions(["something"]) 和定义的方法something() { this.$store.dispatch('something') } 所以我删除了方法声明。

它仍然没有工作，所以我检查了 eslint 上的 build main.xxxx.js 并在domProps:{value:t.value,value:t.value} 之类的东西上发现了一些“试图重新定义属性'价值'” 查看代码，发现我们有带有v-model 和:value 的组件，还有一些使用v-model 和:checked 的复选框。 我只保留了v-model，它可以工作。

问题似乎也可能来自重复的道具，如此处所述：https://www.tutorialfor.com/blog-267252.htm

Answer 3

我设法找出错误发生在哪一行，并发现我使用的名称为 Vue-numeric 的插件创建了重复值：

 domProps: {
   value: n.value,
   value: n.amount
 },

我不小心将插件锁定在存在此问题的旧版本上。只需更新即可解决此问题。

感谢@xenetics 抽出宝贵时间解决此问题。

Answer 4

是的，这是一个仅在 ES5 严格模式下有效的限制，您显然在这些环境中使用过。这绝对是有道理的，但由于计算属性在 ES6 中仍然松散了 - 请参阅 What's the purpose of allowing duplicate property names? 了解详细信息。这就是为什么 babel 在编译时不会抱怨它的原因。

要在代码库的对象文字中找到这些（有效但无意义的）重复属性名称，您可以使用 linter such as ESLint 和针对这些的规则。