that = thisについて

1 min read読了の目安(約500字

vueの勉強中、以下のような記述を見かけました。

let that = this

データオブジェクトで定義したデータやメソッドなどをvueインスタンス内から利用する際に、thisを使ってアクセスします。しかし、インスタンス内であっても、setIntervalメソッドやsetTimeoutメソッド内ではthisはwindowオブジェクトをさします。したがって、これらのメソッド内でvueインスタンスのデータを使いたい場合は、that=thisを使って'that.プロパティ'や'that.メソッド'などとアクセスする必要があります。

new Vue({
  data: {
    hoge: 12,
  },
  methods: {
    // set 14 to hoge in 5 seconds after foo method gets called
    foo: function() { 
      this.timer = setInterval({
        that.hoge = 14; // (NG) this.hoge = 14
      }, 5000);  
    },
  },
})

CodePen