Vue.js 组件彼此不独立

我期望该组件彼此独立并显示独立的计数器，但这显然不是正在发生的事情......

HTML:

<div id="app">
  <compteur> </compteur>
  <compteur> </compteur>
</div>

JS:

Vue.component('compteur',{
  template: '<div>{{cptr}}</div>',
  data(){
    return {
     cptr:0
    }
  },
  created: function() {
    self = this;
    setInterval(function() {
    self.cptr +=1;
  }, 1000);
}
 })


 vm = new Vue({
  el: "#app",
 });

最重要的是，如果我只使用一个组件，它会按 1 计数，这很好，但如果我添加第二个组件，第一个组件将保持为 0，第二个组件会按 2 计数。

既然你没有声明self，它将作为属性被查找window (as window.self https://developer.mozilla.org/en-US/docs/Web/API/Window/self），那么两个组件实例将访问相同的self财产在window object.

尝试声明self with const or let:

let self = this;

或者更好的是，只需使用箭头函数 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions它将自动绑定this:

setInterval(() => {
  this.cptr += 1;
}, 1000);