解决Vue watch里调用方法的坑

当我们在 Vue 组件里使用 watch 来监听某一个数据的变化时，有时候我们需要在回调函数里执行一些复杂的操作，例如：调用一个方法去计算某个值，或者调用一个 API 获取一些数据。但是，有时候我们会遇到这样的问题：在 watch 回调函数里调用方法时，方法里的 this 变量不指向组件实例。

这个问题的原因是由于 JavaScript 中的 this 变量是在函数执行时动态绑定的。在 watch 回调函数里，this 变量默认绑定到全局对象（window 对象或者 global 对象，取决于当前代码运行的环境）。

解决这个问题的方法很简单，我们可以通过 Vue 提供的 bind 函数来手动修改方法的 this 指向。具体来说，在组件的 methods 里定义一个方法，使用 bind 函数来绑定当前组件实例的 this，然后在 watch 回调函数里调用这个绑定后的方法即可。

下面是一个示例代码，在 Vue 组件里监听 a 和 b 两个数据的变化，计算它们的和，并把和存储到另外一个变量 c 中：

<template>
  <div>
    <p>a: {{a}}</p>
    <p>b: {{b}}</p>
    <p>c: {{c}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
      b: 2,
      c: 3
    }
  },
  methods: {
    calculate() {
      this.c = this.a + this.b
    }
  },
  watch: {
    a: {
      handler: function() {
        this.calculate.bind(this)()
      }
    },
    b: {
      handler: function() {
        this.calculate.bind(this)()
      }
    }
  }
}
</script>

在这个代码里，我们定义了一个 calculate 方法，里面调用了 this.a 和 this.b，然后把计算结果赋值给了 this.c。在 watch 回调函数里，我们通过 bind 方法把 calculate 方法的 this 绑定到当前组件实例的 this 上，然后调用这个绑定后的方法。

除了使用 bind 方法，我们也可以使用箭头函数来绑定 this。因为箭头函数简化了 this 的绑定规则，它会将 this 绑定到函数定义时所在的作用域中。所以，在箭头函数里，可以直接使用 this，它将指向组件实例。

下面是一个使用箭头函数的示例代码，功能同上一个示例代码：

<template>
  <div>
    <p>a: {{a}}</p>
    <p>b: {{b}}</p>
    <p>c: {{c}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
      b: 2,
      c: 3
    }
  },
  methods: {
    calculate: () => {
      this.c = this.a + this.b
    }
  },
  watch: {
    a: {
      handler: function() {
        this.calculate()
      }
    },
    b: {
      handler: function() {
        this.calculate()
      }
    }
  }
}
</script>

在这个代码里，我们使用了箭头函数来定义 calculate 方法，它会自动绑定当前组件实例的 this。然后在 watch 回调函数里，直接调用 calculate 方法即可。

通过上述两个示例代码，我们就可以解决 Vue watch 里调用方法的坑了。当然，在实际开发中，还有很多其他的情况需要注意，例如：如果我们需要在 watch 回调函数里调用异步方法，就需要在异步方法里使用绑定后的 this，而不能使用箭头函数里的 this。总之，我们需要具体问题具体分析，结合 Vue 的文档和实际情况来做出正确的决策。