Vue でデータが変更された後にビューを同期的に更新する方法

序文

少し前に、興味深い問題を目にしました。Vue のデータが変更された後に、ビューを同期的に更新するにはどうすればよいでしょうか? 検索してみましたが、問題の解決策は見つかりませんでした。ソース コードからしか解決策を見つけることができませんでした。

理由

Vue でデータを変更した後、ビューが同期的に更新されないことは誰もが知っています。

vue インスタンスが初期化された後、データはレスポンシブ オブジェクトに設定されます。this.xxx = 1 を実行すると、このレスポンシブ オブジェクトのセッターがトリガーされます。セッターでは、xxx にサブスクライブしているすべてのサブスクライバーに通知するための更新がトリガーされます。ただし、このトリガー更新は同期的ではなく、すべてのウォッチャーをキューに追加し、nextTick 後にビューを更新します。

そのため、vue はビューを同期的に更新できません。

回避策

原因がわかれば、必ず解決策を見つけることができます。

ビューは nextTick で更新されるため、このときにビューを更新するメソッドを実行する必要があります。データが変更されたときにこのメソッドを手動で実行すれば、ビューを同期的に更新するという目的を達成できます。

ソース コードを理解すると、実行されるメソッドは watcher.run() であることがわかります。では、このメソッドを取得するにはどうすればよいのでしょうか。

これをすぐに理解したい場合は、Vue.js Technology Unveiledを読むことをお勧めします。

これをコンソールに出力してみましょう

run メソッドは _watcher オブジェクトのプロトタイプで見つかるため、問題は解決します。

 xxx = 1;
 this._watcher.run()

上記のコードを実行し、データを更新した後にビューを手動で更新して、同期効果を実現します。

より良い解決策

ビューを同期更新したいときに、毎回 this._watcher.run() を追加するのは面倒です。そこで、this.xxx = 1 以降のビューの同期更新をサポートするプラグインを作成しました。

このプラグインの原理は非常にシンプルです。コンポーネント オプションに、データに似たオプション syncData を追加します。次に、それをデータに配置します。create フックが呼び出されると、この部分のデータが再びハイジャックされます。syncData のデータが変更されると、_watch.run() が自動的にトリガーされ、ビューが同期的に更新されます。

プラグインアドレス: GitHubアドレス

追記

正直に言うと、このプラグインは役に立たないと思います。理論的には、このプラグインが解決できる問題はすべて $nextTick で解決できます。

Vue でデータ変更後にビューを同期する方法についての記事はこれで終わりです。Vue ビュー同期更新の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。