Vue.jsのthisについて

Question

下記サイトでVue.jsを学習しているのですが、
コードで１点わからないところがあったので質問させてください。

一番最後のCODEPENの内容で

var app = new Vue({
  el: '#app',
  data: {
    left: 0,
    right: 0,
    isComputedCalled: false
  },
  methods: {
    // この関数が呼び出されたタイミングがわかるように
    // メッセージを表示させる
    setMessage: function () {      
      // メッセージを表示
      this.isComputedCalled = true
      const that = this
      setTimeout(function () {
        that.isComputedCalled = false
      }, 1000) // 1秒後にメッセージが消えます
    }
  },
  computed: {
    total: function () {
      this.setMessage()

      return this.left + this.right
    }
  }
})

setMessageメソッドのsetTimeout内のthatがわかりません。
Vueインスタンスを参照するのであればthisでいい気がしますし、
const that = this
上記のコードから、実際参照しているのはthisだと思うのですが、
なぜわざわざ代入する必要があるのでしょうか？

実際にthisに変えてみると動作しなかった為そうしなければいけない理由があると
思うのですが、いまいちわかりません。

参考になるサイトなど教えていただけると幸いです。

お手数ですがご確認お願いいたします。

Answer 1

thisについてはVueというよりJavaScriptの言語仕様そのものに関わる問題で、こういう記事など、「JavaScript this」などのキーワードで探せばかなりの数の解説があるし、ここの過去の回答でも見つかると思うので、色々読んでみてわからない点を改めて質問した方が良いです。

Answer 2

実際にthisに変えてみると動作しなかった為そうしなければいけない理由があると

思うのですが、いまいちわかりません。

thisは関数の呼び出し方によって変化しえます。functionで書いた関数をsetTimeoutから呼び出すと、その中でのthisはグローバルオブジェクトもしくはundefinedとなってしまいます。そのため、外側でthisを別な名前でキープしておく必要があります。

なお、

• function(){/* 略 */}.bind(this)とする
• Arrow Functionで書く

などすると、thisは今いる関数内でのものに固定されます。