質問: this.lastEl3; console.log("lastEl3のfuga()発動したよ!!"); } }); }, } ``` Vue.jsは非同期処理をしているために同じ値(今回の場合はlastEl)を一度に複数回変更してもそれが検知されないのでしょうか? Vue.jsのライフサイクルなども関係するのかもしれませんが、そこらへんについての知識がなく質問をしました。よろしくお願いします。
回答: > > Vue.jsは非同期処理をしているために同じ値(今回の場合はlastEl)を一度に複数回変更してもそれが検知されないのでしょうか? > > > こちらについては、公式ドキュメントに記載があります。 > > Vue は 非同期 に DOM 更新を実行します。データ変更が検出されると、Vue はキューをオープンし、同じイベントループで起こる全てのデータ変更をバッファリングします。同じウオッチャが複数回トリガされる場合、キューには一度だけ入ります。 > > > `vm.$nextTick()`メソッドを使用しても、当該のデータ変更すべてが同じ(次の)イベントループに延期されるだけなので、結果は同じです。 重複した更新がはぶかれるのは、こちらのサンプルで確認できます。 質問のソースコードのように、同じデータを3回変更しますが、`watch`で指定した関数が実行されるのは1度だけです。 コンソールには最後の変更(`changed: null -> 3`)だけが表示されます。 親コンポーネントで(if文のたびに)子コンポーネントのメソッドを実行することもできますが、`vm.$refs`はリアクティブではない(更新されない)ので微妙かもしれません。 いずれにせよ、panamaxさんの目指している実装のゴールに対して、設計からアプローチを変えた方がいいかもしれません。