2

我在 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>

JS

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

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

4

3 回答 3

1

简短但完整的答案：

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

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

于 2017-03-10T14:42:51.993 回答
1

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

  • 为计算属性使用不同的名称（此处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>

于 2017-09-15T07:44:56.013 回答
0

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

样品 A：

样品 B

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

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

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

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

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

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

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

资源

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.

在此处输入图像描述

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

于 2017-03-10T16:44:16.183 回答