that = this

`that` 和 `this` 都是在JavaScript中用于引用当前作用域中的变量或对象的关键字。它们的区别在于：

1. `this` 关键字在JavaScript中具有上下文依赖性。在Vue组件中，当你使用箭头函数（例如 `.map()`、`.filter()`等）时，`this` 指向的是定义函数的那个上下文，而不是调用函数的对象。而在普通函数（如事件处理器或成员函数）中，`this` 则通常指向调用者。

2. `that` 是一种常见的解决方案，用来保存在非箭头函数中可能改变的 `this` 值。在一些情况下，比如处理回调函数或异步操作，由于闭包的原因，`this` 可能不指向预期的对象，这时可以用 `that` 来保存原始的 `this` 值。

在Vue中，特别是在生命周期钩子、自定义事件处理器以及组件方法内部，为了确保始终能够访问到正确的实例，你可以直接使用 `this`，因为这些地方 `this` 的行为已经明确。

methods: {
  doSomething() {
    // 在这里，this 就是指向 Vue 实例
    console.log(this.someProperty);
  }
}

如果你想明确地绑定一个特定的上下文，比如在事件监听器中，可以使用 `function.bind()` 或者模板字符串中的 `${}` 语法：

<template>
  <button @click="handleClick">{{ message }}</button>
</template>

<script>
export default {
  data() {
    return { message: 'Hello' };
  },
  methods: {
    handleClick() {
      // 这里 this 将指向按钮元素
      alert(`${this.message} clicked`);
    }
  }
};
</script>