Wie erzwinge ich korrekt das erneute Rendern von Komponenten in Vue? (Methodeneinführung)

Manchmal reicht es nicht aus, sich bei der Aktualisierung von Daten auf die Reaktionsfähigkeit von Vue zu verlassen. Stattdessen müssen wir die Komponente manuell neu rendern, um die Daten zu aktualisieren. Oder wir möchten vielleicht einfach das aktuelle DOM wegwerfen und von vorne beginnen. Wie können Sie also dafür sorgen, dass Vue die Komponente korrekt neu rendert?

Der beste Weg, Vue zum erneuten Rendern einer Komponente zu zwingen, besteht darin, :key für die Komponente festzulegen. Wenn wir die Komponente neu rendern müssen, müssen wir nur den Wert von key ändern und Vue rendert die Komponente neu.

Dies ist eine sehr einfache Lösung.

Natürlich könnten Sie auch an anderen Methoden interessierter sein:

• Einfache und grobe Methode: Laden Sie die gesamte Seite neu
• Unangemessene Methode: Verwenden Sie v-if
• Besserer Weg: Verwenden Sie die integrierten forceUpdate Methoden von Vue
• Bester Weg: Nehmen Sie key Änderungen an der Komponente vor 🎜>
Der einfache und grobe Weg: Laden Sie die gesamte Seite neu

Dies entspricht einem Neustart Ihres Computers jedes Mal, wenn Sie die Anwendung schließen möchten.

Dieser Ansatz mag funktionieren, aber es ist eine sehr schlechte Lösung. Tu es nicht, mal sehen. Sehen Sie sich a an besserer Weg.

Unangemessene Methode: Verwenden Sie die Direktive

v-if, die nur verwendet wird, wenn die Komponente wird nur gerendert, wenn . Wenn

, existiert die Komponente nicht im

DOMv-if. truefalseSehen wir uns an, wie funktioniert. Fügen Sie in den Befehl

<template>
  <my-component v-if="renderComponent" />
</template>

verwenden Sie in v-if die Methode templatev-if

<script>
  export default {
    data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // 从 DOM 中删除 my-component 组件
        this.renderComponent = false;
        
        this.$nextTick(() => {
          // 在 DOM 中添加 my-component 组件
          this.renderComponent = true;
        });
      }
    }
  };
</script>

Der obige Prozess ist ungefähr wie folgt:

scriptnextTickZuerst wird

auf

gesetzt, sodass die

-Komponente

1. gerendert wird, wenn wir setzen wir renderComponent sofort auf truemy-component
und beenden das Rendern von
2. , da die forceRerender-Direktive jetzt im renderComponent-Methodensatz zu false
3. ausgewertet wird my-component zurück zu v-iffalse
Wenn das Berechnungsergebnis der
4. -Anweisung nextTick ist, rendern Sie renderComponenttrue
5. erneut 2 Dieser Teil ist wichtiger v-iftrue Zuerst müssen wir bis my-component warten, sonst sehen wir keine Änderungen.

In

Vue

ist ein Häkchen ein DOM-Aktualisierungszyklus. Vue sammelt alle im selben Tick vorgenommenen Aktualisierungen und rendert am Ende des Ticks den Inhalt im DOM basierend auf diesen Aktualisierungen. Wenn wir nicht bis zum nächsten Tick warten, wird unser Update auf

automatisch abgebrochen und es ändert sich nichts. nextTick

Zweitens erstellt Vue beim zweiten Rendern eine brandneue Komponente. Vue wird das erste zerstören und ein neues erstellen, was bedeutet, dass unser neues

seinen gesamten Lebenszyklus wie gewohnt durchläuft – , usw. renderComponent

Außerdem kann

mit Versprechen verwendet werden:my-component

forceRerender() {
  // 从 DOM 中删除 my-component 组件
  this.renderComponent = false;

  this.$nextTick().then(() => {
    this.renderComponent = true;
  });
}

createdDas ist allerdings keine wirklich tolle Lösung, also lasst uns tun, was Vue von uns verlangtmounted

nextTickBessere Methode: forceUpdate-Methode

Dies ist eine der beiden besten Möglichkeiten, dieses Problem zu lösen. Beide erhalten offizielle Vue-Unterstützung. Normalerweise reagiert Vue auf Änderungen in Abhängigkeiten, indem es Ansichten aktualisiert. Allerdings ist es auch möglich, durch den Aufruf von ein Update zu erzwingen, auch wenn sich tatsächlich nicht alle Abhängigkeiten geändert haben.

Hier sind die größten Fehler, die die meisten Menschen bei der Anwendung dieser Methode machen.

Wenn Vue automatisch aktualisiert wird, wenn sich etwas ändert, warum müssen wir dann ein Update erzwingen?

forceUpdateDer Grund dafür ist, dass das Antwortsystem von Vue manchmal verwirrend sein kann. Wir glauben, dass Vue auf Änderungen einer bestimmten Eigenschaft oder Variablen reagiert, aber tatsächlich ist dies nicht der Fall. In einigen Fällen erkennt das reaktive System von Vue überhaupt keine Änderungen.

Wenn Sie also wie bei der vorherigen Methode dies zum erneuten Rendern Ihrer Komponente benötigen, gibt es wahrscheinlich einen besseren Weg.

Es gibt zwei verschiedene Methoden, die

sowohl auf der Komponenteninstanz selbst als auch global aufgerufen werden können:

// 全局
import Vue from 'vue';
Vue.forceUpdate();

// 使用组件实例
export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();
      // ...
    }
  }
}

Wichtiger Hinweis: Dadurch werden keine berechneten Eigenschaften aktualisiert, sondern nur

aufgerufen erzwingt ein erneutes Rendern der Ansicht.

forceUpdate

Der beste Weg:

forceUpdate

Änderungen an der Komponente vornehmen

In vielen Fällen müssen wir erneut rendern die Komponente.

要正确地做到这一点，我们将提供一个key属性，以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变，则不会更改组件，但是如果key发生更改，Vue 就会知道应该删除旧组件并创建新组件。

正是我们需要的！

但是首先，我们需要绕一小段路来理解为什么在Vue中使用key。

为什么我们需要在 Vue 中使用 key

一旦你理解了这一点，那么这是了解如何以正确方式强制重新渲染的很小的一步。

假设我们要渲染具有以下一项或多项内容的组件列表：

• 有本地的状态
• 某种初始化过程，通常在created或mounted钩子中
• 通过jQuery或普通api进行无响应的DOM操作

如果你对该列表进行排序或以任何其他方式对其进行更新，则需要重新渲染列表的某些部分。 但是，不会希望重新渲染列表中的所有内容，而只是重新渲染已更改的内容。

为了帮助 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视频教程！

Das obige ist der detaillierte Inhalt vonWie erzwinge ich korrekt das erneute Rendern von Komponenten in Vue? (Methodeneinführung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!