【Vue】this.$nextTick。前の処理完了をまってから指定した処理を実行する。

コードは正しいのに、メソッド実行後の処理の出力結果が狙ったものと違うものになってしまう事象が発生。

this.$nextThickを使うことで解消できた。

発生状況

・クリックイベントで変数を変更する操作。
・対象の変数が、親テンプレートでwatchや、getter、setterの対象となっていた。

クリックイベントで変数を変更したが、他のgetterやsetterでその変数を別の値に代入する処理が行われており、watchで変更を自動検知した時に、古いデータに戻っていた。

処理の実行順序が入り組んでしまったことが問題。

対処法

処理を意図的に遅らせる$nextTickを使用する。

nextTickとは？

this.$nextTick(() => { 処理 })

callback関数を使って、DOMを更新後に指定した処理を実行する処理。

tickとは時計のチクタク音。次のカッチまで待つということ（と思われる）

グローバルに宣言する「Vue.nextTick(() => { })」も同じ処理になる。

＞Vue公式 nextTick

記述例

変数が宣言されていない場合に、親のタグで属性「:xxx.sync」で指定した変数xxxを変更する処理。

if(xxx != undefined){
        this.$nextTick(() => {
          this.$emit('update:xxxSync', xxx)
        })
      }

この変数xxxが他の場所で代入されたり、watchされていて、変更したはずのデータが反映されなかったが、nextTickを使ったことで、変更がきちんと反映された。

▼補足
nextTickは極力使用を避ける。各変数の依存が適切に記述され実行順序がクリアであれば、nextTickを使う必要はない。