Vue组件中如何正确保存this的引用？

首先得说，你的这个写法有潜在的严重bug，而且其实完全没必要用全局的self变量来保存组件实例！

问题出在哪？ #

你定义的self是一个全局变量（在<script>标签的最外层，不属于组件的任何作用域），如果页面上同时渲染了多个Test组件实例，后面的实例在created钩子中会把self覆盖成自己的实例。这时候之前的实例调用load方法时，会错误地修改最后一个实例的name属性，完全不符合预期。

为什么你不需要存self？ #

你担心箭头函数里this会变化其实是个误解——箭头函数本身不会绑定自己的this，它会继承外层作用域的this。在你的load方法里，外层作用域就是组件的方法作用域，这里的this本来就指向当前组件实例，所以直接在箭头函数里用this就完全没问题。

修正后的代码 #

<template>
  <div> Hi from {{name}} </div>
</template>
<script>
export default {
  created() {
    // 这里不需要再存self了
  },
  methods: {
    load() {
      // 箭头函数自动继承methods中的this，指向组件实例
      ajax().then((obj) => {
        this.name = obj.data;
      });
    }
  },
  data() {
    return {
      name: 'one',
    }
  }
}
</script>

额外补充：如果用普通函数回调怎么办？ #

要是你因为某些原因必须用普通函数作为then的回调（比如需要用到回调自身的this），那可以用这两种方式处理：

• 用bind(this)绑定组件实例的this：

  ajax().then(function(obj) {
    this.name = obj.data;
  }.bind(this));
  

• 在方法内部定义一个块级作用域的变量保存实例（避免全局污染）：

  load() {
    const vm = this;
    ajax().then(function(obj) {
      vm.name = obj.data;
    });
  }
  

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