Vue中如何正確強制元件重新渲染？ （方法介紹）

有時候，依賴 Vue 回應方式來更新資料是不夠的，相反，我們需要手動重新渲染元件來更新資料。或者，我們可能只想拋開目前的DOM，重新開始。那麼，如何讓Vue以正確的方式重新呈現元件呢？

強制 Vue 重新渲染元件的最佳方法是在元件上設定:key。當我們需要重新渲染元件時，只需更 key 的值，Vue 就會重新渲染元件。

這是一個非常簡單的解決方案。

當然，你可能會對其他方式會更感興趣：

• 簡單粗暴的方式：重新載入整個頁面
• #的方式：使用v-if
• 較好的方法：使用Vue的內建forceUpdate方法
• 最好的方法：在元件上進行key 更改

簡單粗暴的方式：重新載入整個頁面

這相當於每次你想關閉應用程式時都要重新啟動你的電腦。

這種方式或許有用，但這是一個非常糟糕的解決方案，不要這樣做，我們來看看更好的方法。

不妥的方式：使用v-if

v- if指令，該指令僅在元件為true時才渲染。如果為false，則該元件在DOM中不存在。

來看看，v-if 是怎麼運作的，在template#中，加入v-if指令：

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

在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>

上面的過程大致如下：

1. 剛開始 renderComponent設定為true，因此渲染my-component 元件
2. 當我們呼叫forceRerender時，我們立即將 renderComponent設定為false
3. 我們停止渲染my-component，因為v-if指令現在計算結果為 false
4. 在nextTick方法中將renderComponent設定回true
5. 當v-if 指令的計算結果為true時，再次渲染my-component

在這個過程中，有兩個部分比較重要

首先，我們必須等到nextTick，否則我們不會看到任何變化。

在Vue中，一個 tick 是一個DOM更新周期。 Vue將收集在同一 tick 中進行的所有更新，在 tick 結束時，它將根據這些更新來渲染 DOM 中的內容。如果我們不等到next tick，我們對renderComponent的更新就會自動取消，什麼也不會改變。

其次，當我們第二次渲染時，Vue將建立一個全新的元件。 Vue 將銷毀第一個，並創建一個新的，這意味著我們的新my-component將像正常情況一樣經歷其所有生命週期-created， mounted等。

另外，nextTick 可以與promise 一起使用:

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

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

不過，這並不是一個很好的解決方案，所以，讓我們做Vue 想讓我們做的

較好的方法：forceUpdate 方法

這是解決這個問題的兩個最佳方法之一，這兩種方法都得到了Vue的官方支持。

通常情況下，Vue 會透過更新視圖來回應依賴項中的變更。然而，當我們呼叫forceUpdate時，也可以強制執行更新，即使所有依賴項實際上都沒有改變。

以下是大多數人使用這種方法時所犯的最大錯誤。

如果 Vue 在事情發生變化時自動更新，為什麼我們需要強制更新？

原因是有時 Vue 的回應系統會讓人感到困惑，我們認為Vue會對某個屬性或變數的變化做出回應，但實際上並不是這樣。在某些情況下，Vue的響應系統根本無法偵測到任何變化。

所以就像上一個方法，如果你需要這個來重新渲染你的元件，可能有一個更好的方法。

有兩種不同的方法可以在元件實例本身和全域呼叫forceUpdate：

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

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

重要提示：這不會更新任何運算屬性，呼叫 forceUpdate僅強制重新渲染視圖。

最好的方法：在元件上進行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视频教程！

以上是Vue中如何正確強制元件重新渲染？ （方法介紹）的詳細內容。更多資訊請關注PHP中文網其他相關文章！