ホームページ > 記事 > ウェブフロントエンド > Vue でコンポーネントを正しく強制的に再レンダリングするにはどうすればよいですか? (手法の紹介)
Vue の応答性に頼ってデータを更新するだけでは不十分な場合があり、代わりにコンポーネントを手動で再レンダリングしてデータを更新する必要があります。あるいは、現在の DOM を破棄して最初からやり直すこともできます。では、Vue でコンポーネントを正しい方法で再レンダリングするにはどうすればよいでしょうか?
Vue にコンポーネントの再レンダリングを強制する最良の方法は、コンポーネントに :key
を設定することです。コンポーネントを再レンダリングする必要がある場合、key
の値を変更するだけで、Vue がコンポーネントを再レンダリングします。
これは非常に簡単な解決策です。
もちろん、他の方法に興味があるかもしれません:
v -if
forceUpdate
メソッドを使用しますキー
Change簡単で大雑把な方法: ページ全体をリロードします。
これは、コンピュータを毎回再起動するたびにアプリケーションを閉じるのと同じです。 。
この方法は機能するかもしれませんが、非常に悪い解決策です。これは行わないでください。見てみましょう。もっといい方法。
不適切な方法: v-if
v- if# を使用します## ディレクティブ。コンポーネントが
true の場合にのみレンダリングされます。
false の場合、コンポーネントは
DOM に存在しません。
v-if がどのように機能するかを見てみましょう。
template に、
v-if ディレクティブを追加します:
<template> <my-component v-if="renderComponent" /> </template>In
script、
nextTick メソッドを使用します
<script> export default { data() { return { renderComponent: true, }; }, methods: { forceRerender() { // 从 DOM 中删除 my-component 组件 this.renderComponent = false; this.$nextTick(() => { // 在 DOM 中添加 my-component 组件 this.renderComponent = true; }); } } }; </script>上記のプロセスは大まかに次のとおりです:
true に設定されているため、
my-component コンポーネント
を呼び出すと、すぐに
renderComponentは
false
ディレクティブが
false と評価されるため、
my-component のレンダリングを停止します。
When の場合、
nextTick メソッドで
renderComponent を
true に設定します。命令の計算結果は
true、
my-component を再度レンダリングします
まず、
nextTick まで待つ必要があります。そうしないと、変更が表示されません。
では、ティックは DOM 更新サイクルを表します。 Vue は同じティック内で行われたすべての更新を収集し、ティックの終了時にそれらの更新に基づいて DOM 内のコンテンツをレンダリングします。次のティックまで待たないと、renderComponent への更新は自動的にキャンセルされ、何も変わりません。 2 番目に、2 回目のレンダリング時に、Vue はまったく新しいコンポーネントを作成します。 Vue は最初のコンポーネントを破棄し、新しいコンポーネントを作成します。これは、新しい
が通常どおりすべてのライフサイクルを通過することを意味します - created
、 Mounted
等 また、
は、promise とともに使用できます: <pre class="brush:js;toolbar:false;">forceRerender() {
// 从 DOM 中删除 my-component 组件
this.renderComponent = false;
this.$nextTick().then(() => {
this.renderComponent = true;
});
}</pre>
ただし、これはあまり良い解決策ではないので、Vue が望んでいることを実行しましょう。
これは、この問題を解決する 2 つの最良の方法のうちの 1 つであり、どちらの方法もすべて Vue で正式にサポートされています。
通常、Vue はビューを更新することで依存関係の変更に対応します。ただし、forceUpdate
を呼び出すと、すべての依存関係が実際には変更されていない場合でも、更新を強制することもできます。この方法を使用するときにほとんどの人が犯す最大の間違いは次のとおりです。
forceUpdate
を呼び出すことができる 2 つの異なるメソッドがあります:// 全局 import Vue from 'vue'; Vue.forceUpdate(); // 使用组件实例 export default { methods: { methodThatForcesUpdate() { // ... this.$forceUpdate(); // ... } } }
重要な注意: これは、次の計算プロパティを更新しません。 call
forceUpdate はビューの再レンダリングを強制するだけです。 key を変更します多くの場合次へ、コンポーネントを再レンダリングする必要があります。
要正确地做到这一点,我们将提供一个key
属性,以便 Vue 知道特定的组件与特定的数据片段相关联。如果key
保持不变,则不会更改组件,但是如果key
发生更改,Vue 就会知道应该删除旧组件并创建新组件。
正是我们需要的!
但是首先,我们需要绕一小段路来理解为什么在Vue中使用key
。
为什么我们需要在 Vue 中使用 key
一旦你理解了这一点,那么这是了解如何以正确方式强制重新渲染的很小的一步。
假设我们要渲染具有以下一项或多项内容的组件列表:
created
或mounted
钩子中如果你对该列表进行排序或以任何其他方式对其进行更新,则需要重新渲染列表的某些部分。 但是,不会希望重新渲染列表中的所有内容,而只是重新渲染已更改的内容。
为了帮助 Vue 跟踪已更改和未更改的内容,我们提供了一个key
属性。 在这里使用数组的索引,因为索引没有绑定到列表中的特定对象。
const people = [ { name: 'Evan', age: 34 }, { name: 'Sarah', age: 98 }, { name: 'James', age: 45 }, ];
如果我们使用索引将其渲染出来,则会得到以下结果:
<ul> <li v-for="(person, index) in people" :key="index"> {{ person.name }} - {{ index }} </li> </ul> // Outputs Evan - 0 Sarah - 1 James - 2
如果删除Sarah
,得到:
Evan - 0 James - 1
与James
关联的索引被更改,即使James
仍然是James
。 James
会被重新渲染,这并不是我们希望的。
所以这里,我们可以使用唯一的 id
来作为 key
const people = [ { id: 'this-is-an-id', name: 'Evan', age: 34 }, { id: 'unique-id', name: 'Sarah', age: 98 }, { id: 'another-unique-id', name: 'James', age: 45 }, ]; <ul> <li v-for="person in people" :key="person.id"> {{ person.name }} - {{ person.id }} </li> </ul>
在我们从列表中删除Sarah
之前,Vue删除了Sarah
和James
的组件,然后为James
创建了一个新组件。现在,Vue知道它可以为Evan
和James
保留这两个组件,它所要做的就是删除Sarah
的。
如果我们向列表中添加一个person
,Vue 还知道可以保留所有现有的组件,并且只需要创建一个新组件并将其插入正确的位置。这是非常有用的,当我们有更复杂的组件,它们有自己的状态,有初始化逻辑,或者做任何类型的DOM操作时,这对我们很有帮助。
所以接下来看看,如果使用最好的方法来重新渲染组件。
更改 key 以强制重新渲染组件
最后,这是强制Vue重新渲染组件的最佳方法(我认为)。
我们可以采用这种将key
分配给子组件的策略,但是每次想重新渲染组件时,只需更新该key
即可。
这是一个非常基本的方法
<template> <component-to-re-render :key="componentKey" /> </template> export default { data() { return { componentKey: 0, }; }, methods: { forceRerender() { this.componentKey += 1; } } }
每次forceRerender
被调用时,我们的componentKey
都会改变。当这种情况发生时,Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件,它将重新初始化自身并“重置”其状态。
如果确实需要重新渲染某些内容,请选择key
更改方法而不是其他方法。
原文地址:https://hackernoon.com/the-correct-way-to-force-vue-to-re-render-a-component-bde2caae34ad
推荐学习:vue视频教程!
以上がVue でコンポーネントを正しく強制的に再レンダリングするにはどうすればよいですか? (手法の紹介)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。