vue里this与_this的区别

在Vue.js的开发中，this和_this经常会被使用到，它们虽然看似相似，但实际上有着重要的区别。

一、this的含义和用法

在Vue实例中，this指向当前的Vue实例对象。它可以访问到Vue实例中的各种属性和方法，比如data中的数据、methods中定义的方法等。例如：

<template>
  <div>{{ message }}</div>
  <button @click="changeMessage">点击修改消息</button>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    };
  },
  methods: {
    changeMessage() {
      this.message = '消息已修改';
    }
  }
};
</script>

在上述代码中，changeMessage方法中的this指向当前的Vue实例，所以可以通过this.message来修改data中的message值。

二、_this的常见场景及作用

_this通常是在一些特定的场景中出现，比如在回调函数或者定时器等情况下。由于这些场景下的this指向可能会发生变化，不再指向Vue实例，所以我们会事先将Vue实例的this保存为_this。例如：

<template>
  <div>{{ count }}</div>
  <button @click="startCounting">开始计数</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    startCounting() {
      let _this = this;
      setInterval(function() {
        _this.count++;
      }, 1000);
    }
  }
};
</script>

在这个例子中，setInterval的回调函数中的this指向的并不是Vue实例，所以我们使用_this来保存Vue实例的引用，从而可以正确地修改count的值。

三、总结

this在Vue实例中指向当前的Vue实例对象，方便我们访问和操作实例中的属性和方法。而_this主要是为了解决在一些特殊场景下this指向改变的问题，通过事先保存Vue实例的引用，确保我们能够正确地访问和操作实例的属性和方法。理解它们的区别对于Vue.js的开发至关重要，可以帮助我们避免很多常见的错误。