Question

我正在学习vt js跟随YT的频道，该视频是去年发送的，所以我认为它不起作用，因为VueJS本身有一些变化，但如果你们能帮我解决这个问题会很棒

codeio link：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>

JS

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

它应该计算点击量，然后使用计算的proprerty显示一个等于点击次数为2的计数器，但由于某种原因它不起作用..

Answer 1

简短但完整的答案：

永远不要对data变量和computed使用相同的名称。

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

Answer 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>

Answer 3

由于我不确定为什么会这样，我在jsFiddle上进行了两次测试：

sample A:

sample B

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

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

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

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

Vue warn：现有的实例属性＆＃34; haveTrigger＆＃34;将被具有相同名称的计算属性覆盖。

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

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

Source

＆＃13;

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)

＆＃13;

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

上面的代码片段将说明如果对象和原型上存在同名属性，会发生什么。

计算道具不能正常使用Vue JS 2

3 个答案: