深入理解Vue.js中的this：解析this关键字及其使用场景

在Vue.js中，this 和 that 可能是指向不同对象的两个变量，或者是在代码中使用时的错误。

this：

在Vue组件中，this 指向当前组件的实例。可以通过 this 访问组件的属性和方法。

例如，在Vue组件的 data 属性中定义了一个属性 message，可以通过 this.message 访问它。

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    showMessage() {
      console.log(this.message);
    }
  }
};

that：

通常，that 不是Vue中的关键字，而是在一些特定的上下文或代码中可能被用作变量名。

如果你看到代码中有 that，可能是开发者自定义的一个变量名，而不是Vue.js中的关键字。

// 例子中的 that 是一个普通的变量
let that = this;

注意：

• 在Vue.js中，为了避免上下文切换问题，通常在回调函数中会使用箭头函数或者通过绑定 this 来确保 this 的指向。
• 在一些情况下，可能会在回调函数中将 this 赋值给一个变量，例如 that，以便在回调函数中访问Vue组件实例。

export default {
  created() {
    let that = this;
    setTimeout(function () {
      console.log(that.message);
    }, 1000);
  }
};

总体而言，在Vue.js中，主要关注于使用 this 来访问组件实例的属性和方法，而 that 可能是开发者根据具体情况选择的变量名。