Comment forcer correctement le rendu des composants dans Vue ? (Présentation de la méthode)

Parfois, compter sur la réactivité de Vue pour mettre à jour les données ne suffit pas. Au lieu de cela, nous devons restituer manuellement le composant pour mettre à jour les données. Ou bien, nous pourrions simplement vouloir supprimer le DOM actuel et recommencer. Alors, comment faire en sorte que Vue restitue le composant de la manière correcte ?

La meilleure façon de forcer Vue à restituer un composant est de définir :key sur le composant. Lorsque nous devons restituer le composant, il nous suffit de modifier la valeur de key et Vue restituera le composant.

C'est une solution très simple.

Bien sûr, vous pourriez être plus intéressé par d'autres moyens :

• Manière simple et grossière : recharger la page entière
• Manière inappropriée : utiliser v-if
• Meilleure façon : utilisez les forceUpdate méthodes intégrées de Vue
• Meilleure façon : effectuez des key modifications sur le composant 🎜>
La méthode simple et grossière : rechargez la page entière

Cela équivaut à redémarrer votre ordinateur à chaque fois que vous souhaitez fermer l'application.

Cette approche peut fonctionner, mais c'est une très mauvaise solution, Ne le faites pas, voyons voir. meilleure façon.

Manière inappropriée : utiliser la directive

v-if, qui n'est utilisée que lorsque le composant est rendu uniquement lorsque . Si

, le composant n'existe pas dans le

DOMv-if. truefalseVoyons comment fonctionne. Dans , ajoutez la commande

 :

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

v-ifDans template, utilisez la méthode v-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>

Le processus ci-dessus est à peu près le suivant :

scriptnextTickAu début,

est défini sur

, donc le composant

1. est rendu lorsque nous appelons renderComponent , nous définissons immédiatement true sur my-component
2. et nous arrêtons le rendu forceRerender car la directive renderComponent est désormais évaluée à false
3. dans la méthode my-component Set v-if retour à false
4. Lorsque le résultat du calcul de l'instruction nextTick est renderComponent, restituez true
5. v-if Dans ce processus, il y en a à nouveau. deux Cette partie est plus importante truemy-component D'abord, il faut attendre
, sinon nous ne verrons aucun changement.

Dans

Vue

, un tick est un cycle de mise à jour du DOM. Vue collectera toutes les mises à jour effectuées au cours du même tick, et à la fin du tick, il restituera le contenu dans le DOM en fonction de ces mises à jour. Si nous n'attendons pas le prochain tick, notre mise à jour vers nextTick sera automatiquement annulée et rien ne changera.

Deuxièmement, lors du deuxième rendu, Vue créera un tout nouveau composant. Vue détruira le premier et en créera un nouveau, ce qui signifie que notre nouveau traversera tout son cycle de vie comme d'habitude - , renderComponent, etc.

De plus, my-component peut être utilisé avec des promesses :created

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

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

mountedCe n'est pas vraiment une bonne solution, alors faisons ce que Vue veut que nous fassions

nextTick

Meilleure méthode : méthode forceUpdate

C'est l'une des deux meilleures façons de résoudre ce problème, toutes deux bénéficiant du support officiel de Vue. Normalement, Vue répond aux changements de dépendances en mettant à jour les vues. Cependant, il est également possible de forcer une mise à jour lorsque l'on appelle , même si toutes les dépendances n'ont pas réellement changé.

Voici les plus grosses erreurs que la plupart des gens commettent en utilisant cette méthode.

Si Vue se met automatiquement à jour lorsque les choses changent, pourquoi devons-nous forcer une mise à jour ? forceUpdate

La raison est que parfois le système de réponse de Vue peut prêter à confusion. Nous pensons que Vue répondra aux modifications d'une certaine propriété ou variable, mais en fait ce n'est pas le cas. Dans certains cas, le système réactif de Vue ne détecte aucun changement.

Donc, comme pour la méthode précédente, si vous en avez besoin pour restituer votre composant, il existe probablement un meilleur moyen.

Il existe deux méthodes différentes qui peuvent être appelées

à la fois sur l'instance du composant elle-même et globalement :

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

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

Remarque importante : cela ne met à jour aucune propriété calculée, appelant

simplement force un nouveau rendu de la vue.

forceUpdate

La meilleure façon : effectuer des forceUpdate

modifications sur le composantDans de nombreux cas, nous avons besoin d'un nouveau rendu le composant. key

要正确地做到这一点，我们将提供一个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视频教程！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!