vue が現在のページを更新しない場合はどうすればよいですか?

vue が現在のページを更新しない場合の解決策は次のとおりです: 1. 「this.show = false;setTimeout(() => {this.show = true}」のようなコードを使用して、データのしきい値を定義します。 ,0 )"; 2. データの処理後、「this.$froceUpdate()」を使用して強制的に更新します。 3. データの処理が完了したら、データのリセット操作を実行します。 4. 「this.$set」を使用します。グローバルメソッド、データ更新など

#このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。

vue が現在のページを更新しない場合はどうすればよいですか?

vue プロジェクトのデータ更新ページが更新されません。

この状況はさまざまなタイプに分類できますが、その理由は vue3 より前のバージョンであるためです。 .0 ではオブジェクト (配列やオブジェクトを含む) の変更を監視できません データが変更された場合、Vue の更新メカニズムではデータの変更を検出できないため、実際のアプリケーションのプロセスでさまざまなプロセスを経てページ更新の目的を達成する必要があります。

1. これは、データの更新が完了した後にページを並べ替えて再描画するという単純かつ大雑把な解決策ですが、この方法ではページの使用量が急激に増加します。具体的な実装方法は次のとおりです:

show などのデータにしきい値を定義し、最初は true;

コードの実装:

this.show = false;
setTimeout(() => {
 
  this.show = true
 
},0)

2. データの処理後、this.$froceUpdate() を使用して強制更新します;

3. データ処理の完了後、データのリセットを実行しますただし、このメソッドはオブジェクトに対してのみ有効であることに注意してください (私は個人的に配列をテストしましたが、無効でした。友達が入手できたら、メッセージを残して崇拝させてください、へへ)。このメソッドは参照型のキー値を持つオブジェクトには適さない データソース (この方法の場合、個人的には参照型データを表示するためのテンプレートを別のコンポーネントにカプセル化して、その中でデータを更新できると思います)もちろん、データの変更を監視することは不可欠です。この方法はテストされていません。当然のことですが、問題ないはずです)

let temp = this.data;
this.data = null;
this.data = temp

4. 公式の方法を使用し、これを使用してください。$set グローバル メソッドデータを更新する; ここでは、vue のデータ バインディング メカニズムについて説明します; ページが作成されるとき そのプロセスにおいて、HTML テンプレートは、最初に作成されたときにデータ内にすでに存在するデータのみをバインドします。ページ作成後、データは更新されますが、ページは更新されません。 this.$set (データソース、追加するデータのキー/ソースデータ内のインデックス、新しいデータ) このメソッドは公式で提供されていますデータの追加には Vue を使用し、ページの更新を実現できます。

5. 配列データの場合、データを変更した後にページが更新されない一般的な理由は次のとおりです:

• 配列添字を使用して配列要素を変更する

• 配列の長さを変更する

配列データを変更するときは、push()、pop()、shift()、unshift()、splice( )、Vue はこれらのメソッドによって引き起こされた配列データの変更を直接検出できるため、sort() や reverse() などのネイティブ メソッドを使用してデータを操作します。

6. データが更新されない最も根本的な理由は、Vue がテンプレート構造が更新されていないと認識しているため、新しい仮想 dom が生成されないため、新しい仮想 dom を追加できます。更新する必要がある dom (操作の終了後に発生します) キーの値を変更すると、更新されます (これは最近学んだ新しいスキルです。さらに追加します)。

推奨される学習: 「vue ビデオ チュートリアル 」

以上がvue が現在のページを更新しない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。