Vue.js组件相互不独立，计数器异常问题求助

嘿，我一眼就揪出问题所在啦！你遇到的多个compteur组件计数器混乱的情况，核心原因是全局变量污染导致的～

问题根源 #

你在组件的created钩子中写了self = this;，这里的self没有用let、const或var声明，直接变成了全局变量。当第一个组件创建时，self指向它的实例；但第二个组件创建后，会把全局的self重新赋值成自己的实例。结果就是两个定时器都在修改第二个组件的cptr值——每秒触发两次加1，所以第二个组件每秒加2；而第一个组件的实例再也没被引用到，计数器自然停在0不动。

修复方案 #

只需要把self变成组件实例内的局部变量就行，给你几种简洁的修复方式：

方式1：用let声明局部变量

Vue.component('compteur',{
  template: '<div>{{cptr}}</div>',
  data(){
    return { cptr:0 }
  },
  created: function() {
    let self = this; // 加上let，把self变成当前组件的局部变量
    setInterval(function() {
      self.cptr +=1;
    }, 1000);
  }
})

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

方式2：用箭头函数自动绑定this（更清爽）

箭头函数会自动继承当前上下文的this，根本不需要额外声明self：

Vue.component('compteur',{
  template: '<div>{{cptr}}</div>',
  data(){
    return { cptr:0 }
  },
  created: function() {
    setInterval(() => { // 箭头函数直接用this就行
      this.cptr +=1;
    }, 1000);
  }
})

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

可选优化：清除定时器避免内存泄漏

为了更规范，建议在组件销毁时清除定时器，防止内存浪费：

Vue.component('compteur',{
  template: '<div>{{cptr}}</div>',
  data(){
    return { cptr:0 }
  },
  created: function() {
    this.timer = setInterval(() => {
      this.cptr +=1;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer); // 组件销毁前清理定时器
  }
})

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

修改后每个compteur组件都会拥有独立的计数器，各自每秒加1，完全互不影响啦！

内容的提问来源于stack exchange，提问作者Enirdas