vue数据绑定为什么要把this换成that • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

在Vue中，数据绑定是实现双向数据绑定的核心机制之一。当我们在Vue实例中定义了data属性并在模板中使用时，可以在模板中直接访问和修改data属性的值。然而，由于JavaScript的作用域限制，有时我们在回调函数中无法直接访问Vue实例的this。

为了解决这个问题，一种常见的做法是将Vue实例的this赋值给一个变量（通常命名为that或self），然后在回调函数中使用该变量来代替this。这样做的目的是确保在回调函数中能够正确地访问Vue实例的属性和方法。

具体来说，当在Vue实例内部定义了一个回调函数时，回调函数中的this指向的是当前的上下文环境，而不是Vue实例本身。为了在回调函数中能够访问Vue实例的属性或方法，我们需要将Vue实例的this赋值给变量that（或self），然后在回调函数中使用that来代替this。

例如，当使用axios发送异步请求时，需要在请求的回调函数内部处理返回的数据。此时，如果我们在回调函数中直接使用this，那么this将指向当前的上下文环境，而不是Vue实例。为了能够访问和修改Vue实例中的数据，我们需要将Vue实例的this赋值给一个变量（如that），然后在回调函数中使用that来代替this。

总的来说，将this换成that是为了解决JavaScript作用域限制导致无法直接访问Vue实例的问题，使得在回调函数中能够正确地访问和修改Vue实例的属性和方法。这样可以确保数据绑定的实现正确和有效。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，当我们使用箭头函数时，代码块内部的this指向的是所在的上下文，而不是该代码块所属的对象。这意味着在Vue组件中使用箭头函数时，一般情况下会导致this指向undefined。

为了解决这个问题，通常会在Vue组件中使用变量that来代替this。这样，在箭头函数内部使用that就可以指向正确的上下文。

以下是为什么要将this换成that的几个原因：

作用域问题：箭头函数中的this是在定义函数时绑定的，而不是在调用函数时绑定的。而Vue组件中的箭头函数是在组件定义时绑定的，而不是在组件使用时绑定的。因此，当我们在Vue组件中使用箭头函数时，this指的是Vue实例对象，而不是Vue组件对象。如果需要在箭头函数中访问组件对象的属性或方法，需要将this换成that。
回调函数问题：在Vue组件中，我们经常会使用回调函数来处理异步操作。而回调函数中的this指向的是调用该函数的对象。当我们在回调函数中使用箭头函数时，箭头函数的this指向的是回调函数所在的上下文，而不是Vue组件对象。因此，在回调函数中使用箭头函数，需要将this换成that。
回调函数中的作用域问题：在Vue组件中，我们经常会使用回调函数来处理事件。而回调函数中的this指向的是触发事件的对象。当我们在回调函数中使用箭头函数时，箭头函数的this指向的是回调函数所在的上下文，而不是Vue组件对象。因此，在回调函数中使用箭头函数，需要将this换成that。
代码维护问题：在Vue组件中，通常会有多个方法需要访问组件对象的属性或方法。如果每个方法中都使用this来访问组件对象，代码会显得冗长且容易混乱。而使用that来统一代替this，则可以使代码更加简洁和可读。
兼容性问题：在一些浏览器中，this在特定情况下会发生变化。而使用that来代替this，则可以避免这些兼容性问题。

综上所述，将this换成that是为了解决Vue组件中箭头函数中this指向错误的问题，提高代码的可维护性和可读性，并解决一些兼容性问题。

2年前 0条评论

worktile

Worktile官方账号

在Vue中，数据绑定是将数据和视图进行关联，使得数据的变化能够自动影响到视图的更新，从而实现了数据的响应式。然而，在某些情况下，我们需要尤其小心this的指向问题。

JavaScript中的this是一个非常特殊的关键字，它的指向是动态的，取决于函数被调用的方式。在Vue组件中，由于存在多个嵌套的函数和回调函数，可能会导致this指向发生变化，从而导致我们无法正确地访问或更新数据。

为了解决这个问题，在Vue中通常会在组件的created生命周期函数中使用一个局部变量that来保存正确的this指向。然后在需要使用this的地方，使用that进行访问。这样做的好处有以下几个方面：

保持正确的this指向：使用that可以确保在嵌套函数和回调函数中，依然可以正确地获取到Vue组件实例的this指针。因为that的值在created生命周期函数中已经被赋值为组件实例，它的指向不会发生变化。
提高代码的可读性和可维护性：使用that作为this的替代可以更加清晰地表达代码的意图。人们阅读代码时会立刻明白，that指向的是组件实例。另外，一旦在组件中使用了that，在整个组件中就可以一直使用that来代替this，减少了因为this指向问题而导致的代码混乱和错误。

下面是一个示例代码，演示了在Vue组件中如何使用that来代替this：

export default {
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
  created() {
    const that = this;
    setTimeout(function() {
      // 在回调函数中使用that来代替this
      that.message = 'Hello World!';
    }, 1000);
  },
};

需要注意的是，在使用that的同时，我们也可以使用箭头函数来解决this指向的问题。因为箭头函数中的this是词法作用域，它会绑定到父级作用域中的this，而不是动态改变。因此，使用箭头函数可以避免this指向问题，不再需要使用that来替代this。

2年前 0条评论