Vue 中 強制元件重新渲染的正確方法

前端小智發表於2020-02-01
Vue元件

作者：Michael Thiessen

譯者：前端小智

來源：hackernoon

點贊再看，養成習慣

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了很多我的文件，和教程資料。歡迎Star和完善，大家面試可以參照考點複習，希望我們一起有點東西。

有時候，依賴 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更改方法而不是其他方法。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：hackernoon.com/the-correct…

交流

乾貨系列文章彙總如下，覺得不錯點個Star，歡迎 加群 互相學習。

github.com/qq449245884…

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨，在進階的路上，共勉！

關注公眾號，後臺回覆福利，即可看到福利，你懂的。

clipboard.png

相關文章