2016-10-29 10 views
1

私はVueインスタンス内の変数radioStatusを見る:時計は非同期ですか?

watch: { 
    radioStatus: function(val) { 
     if (!this.discovery) { 
     $.ajax({ url: '/switch/api/radio/' + (val ? 'on' : 'off') }) 
     } 
    } 

それは、AJAX呼び出しで変更することができるが、ページのリロード時にトリガー:

$.ajax({ 
    url: "/api", 
    cache: false 
}) 
    .done(function(response) { 
    vm.discovery = true; 
    vm.radioStatus = response.radio.ison; // <-- the change I mention below is here 
    vm.discovery = false; 
    }); 

は、私は方法のすべてがによってトリガーと仮定することができますradioStatus変更は次の行に行く前に完了します(つまりvm.discovery = false)?

vm.discoveryは、いくつかの監視対象変数(radioStatusと同じ方法で使用される)であり、監視対象変数の機能が終了する前に反転するフラグであるということが懸念されます。

答えて

1

はい、時計は非同期です。参考:https://vuejs.org/guide/computed.html#Watchers

上記のリンクより引用:

ウォッチャー

計算の性質であるが... あなたは変化に応じて、非同期や高価な操作を実行したいときには便利ですデータ。上記のあなたのケースでは

vm.discovery = false;watchに入る前に完了します。 vm.discoveryfalseに設定すると、radioStatusのajaxコールが常に実行されます。それを避けるために

次のように、あなたはvm.$nextTick()を試みることがあります。

$.ajax({url: "/api", cache: false}) 
    .done(function(response) { 
     vm.discovery = true; 
     vm.radioStatus = response.radio.ison; 
     vm.$nextTick(() => { 
      console.log("Setting vm.discovery to false"); 
      vm.discovery = false; 
     }); 
    }); 

それを再度行うには難しいことですが - watchであなたのradioStatus()コールバックはまた、唯一のnextTickに起こるだろうされているため。しかし時計が前の行自体(vm.radioStatus = ...)によって引き起こされると仮定すると、技術的には最初に待ち行列に入るべきであり、したがって早く完了しなければならない。一連のconsole.logステートメントで確認する必要があります。

関連する問題