Vue.js watch の動き

目的

• Vue.js の watch を使い データ変更時に関数を実行した時の挙動が予想と違っていたので メモする

コード

const Vue = require('vue')

var data = { a: 1 }

var vm = new Vue({
  data: data,
  created: function(){
    console.log('a is: ' + this.a)
  },
  methods: {
    aaa: function() {
      console.log('aaa function a is: ' + this.a)
    }
  }
})

console.log(vm.a)

vm.$watch('a', function(aVal) {
  console.log('change: ' + aVal)
})

vm.a = 2

vm.aaa()

予想した動き

• watch が実行されたあと　vm.aaa()　が実行される

実際の動き

• 「aaa function a is: 2」が出力され watch（「change: 2」が出力） があとから非同期で実行されたことが確認できた
• 順番通り実行させたい時は注意が必要。
• 非同期じゃなきゃ watch できないんだから「そりゃそうだ」っちゃそうなんだけど、勘違いするとトラブルになりそうなのでメモった。