计算道具不工作 Vue JS 2答案

【问题标题】：Computed props not working Vue JS 2计算道具不工作 Vue JS 2
【发布时间】：2017-07-31 22:00:58
【问题描述】：

我在 YT 上的一个频道学习 vue js，该视频是去年发送的，所以我认为由于 VueJS 本身的一些变化，它无法正常工作，但如果你们能帮助我，那就太好了

codeio 链接：http://codepen.io/myrgato/pen/BWWxdQ

HTML

<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; 
    }
  }
});

它应该计算点击量，然后使用计算的属性来显示等于点击次数乘以 2 的计数器，但由于某种原因它不起作用..

【问题讨论】：

虽然这可能不是原因，但请尝试从data 中删除counter
等等，它成功了，为什么？
嗯，从去年开始有变化吗？因为看看这个视频youtube.com/…，它在那里工作
你用的是哪个版本的vue？
您不应该同时拥有同名的数据项和计算项。你认为this.counter 指的是哪个？你会如何引用另一个？

标签： javascript vue.js computed-properties

【解决方案1】：

简短但完整的答案：

切勿为data 变量和computed 使用相同的名称。

将数据和计算视为同一个对象，因此名称不能重复。

【讨论】：

它们可以被复制但并非没有反作用，我使用的 vue 2.1.0 会抛出一个错误，computed 属性将覆盖data 属性。
他们不应该是。它违反了最重要的实践之一，即创建可维护的代码。

【解决方案2】：

这是一个可行的解决方案。诀窍是：

为计算属性使用不同的名称（此处为counter2）
并使用带有单个参数的 lambda 函数（此处为 x）而不是 this。

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

<script src="https://unpkg.com/vue@2.2.2"></script>
<div id="app">
  <button @click="increment">Increment</button>
  <p>Counter: {{counter2}}</p>
  <p>Clicks: {{clicks}}</p>
</div>

【讨论】：

【解决方案3】：

由于我不确定为什么会发生这种情况，我在 jsFiddle 上运行了两个测试：

sample A:

sample B

您会注意到，在示例 B 中，执行顺序是：

首先添加数据属性。
创建的钩子被调用。
计算属性计算计数器的值

在样本 A 中，步骤 3 永远不会发生。

在 vue2.1.0 中，您会收到如下警告：

Vue warn：现有实例属性“haveTrigger”将被同名的计算属性覆盖。

进一步检查文档，我发现这个警告在 vue 2.2.2 中被禁止，因此你从未收到它，但伴随它我发现了这个有趣的部分：

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

Source

var fancyConstructor = function () {
  this.value = 5
}

var instance = new fancyConstructor()

fancyConstructor.prototype.value = 5000
fancyConstructor.prototype.someOtherValue = 5000

console.log(instance.value)
console.log(instance.someOtherValue)

你也可以深入每个组件，发现确实有计算属性设置为counter。

上面的 sn-p 将说明如果对象和原型上存在同名属性会发生什么。

【讨论】：