Javascript 计算道具不工作Vue JS 2

我在YT上的一个频道学习vue js，该视频是去年发送的，所以我认为由于VueJS本身的一些变化，它不起作用，但如果你们能帮我解决这个问题，那就太好了

代码链接：

HTML

---

它应该计算点击量，然后使用计算出的比例显示一个等于点击次数乘以2的计数器，但由于某些原因，它不工作。

简短但完整的答案是：

切勿对

数据

变量和

计算的

使用相同的名称

---

考虑数据&计算为同一个对象，因此名称不能重复。

因为我不确定为什么会发生这种情况，所以我在JSFIDLE上运行了两个测试：

在这里，您会注意到，在样本B中，执行顺序是：

首先添加数据属性

调用创建的钩子

computed属性计算计数器的值

在示例A中，步骤3从未发生过

在vue2.1.0中，会出现如下警告：

：现有实例属性“haveTrigger”将被具有相同名称的计算属性覆盖

---

进一步查看文档，我发现此警告在vue 2.2.2中被抑制，因此您从未收到过此警告，但在收到此警告的同时，我发现了以下有趣的内容：

道具和计算属性现在在组件的原型上定义，而不是在每个实例上定义为自身属性。这避免了对Object.defineProperty的多次调用，并提高了组件初始化性能。这只会影响你，如果你依赖于对道具和计算属性的hasOwnProperty检查，这应该是非常罕见的，但我们在这里记录它是为了明确改变

var fancyConstructor=函数（）{
这个值=5
}
var实例=新的fancyConstructor（）
fancyConstructor.prototype.value=5000
fancyConstructor.prototype.someOtherValue=5000
console.log（instance.value）
console.log（instance.someOtherValue）

这是一个有效的解决方案。诀窍在于：

• 为计算属性使用其他名称（此处为

  计数器2

  ）
• 并使用带有单个参数的lambda函数（此处为

  x

  ），而不是

  this

newvue({
el:“#应用程序”，
数据：{
柜台:0,，
点击次数：0
},
方法：{
增量（）{
这个.clicks++；
}
},
计算：{
计数器2:x=>x.clicks*2
}
});

增量
计数器：{{counter2}}

点击：{{Clicks}

虽然这可能不是原因，但请尝试从
数据中删除
计数器
，等等，它起作用了，为什么？嗯，自去年以来它有变化吗？原因请查看此视频，它在那里工作。您使用的是哪个版本的vue？您不应该同时具有相同名称的数据项和计算项。你认为这个计数器会指哪个？您将如何引用另一个？它们可以复制，但不需要重新循环，我使用的vue 2.1.0会抛出一个错误，即
computed
属性将覆盖
data
属性。它们不应该被复制。这与创建可维护代码这一最重要的实践是背道而驰的。
<script src="https://unpkg.com/vue@2.2.2"></script>
<div id="app">
  <button @click="increment">Increment</button>
  <p>Counter: {{counter}}</p>
  <p>Clicks: {{clicks}}</p>
</div>

new Vue({
  el: '#app',
  data: {
    counter: 0,
    clicks: 0
  },
  methods: {
    increment(){
      this.clicks++;
    }
  },
  computed: {
    counter(){
      return this.clicks * 2; 
    }
  }
});