Vue中如何正确强制组件重新渲染？

朱雀 2020-07-01 20:07 1061阅读 0赞

# 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`指令：

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

在`script` 中，使用`nextTick`的方法

```html
<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 一起使用:

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

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

不过，这并不是一个很好的解决方案，所以，让我们做 Vue 想让我们做的

**较好的方法：forceUpdate 方法**

这是解决这个问题的两种最佳方法之一，这两种方法都得到了Vue的官方支持。

通常情况下，Vue 会通过更新视图来响应依赖项中的更改。然而，当我们调用`forceUpdate`时，也可以强制执行更新，即使所有依赖项实际上都没有改变。

下面是大多数人使用这种方法时所犯的最大错误。

如果 Vue 在事情发生变化时自动更新，为什么我们需要强制更新呢？

原因是有时候 Vue 的响应系统会让人感到困惑，我们认为Vue会对某个属性或变量的变化做出响应，但实际上并不是这样。在某些情况下，Vue的响应系统根本检测不到任何变化。

所以就像上一个方法，如果你需要这个来重新渲染你的组件，可能有一个更好的方法。

有两种不同的方法可以在组件实例本身和全局调用`forceUpdate`：

```vue
// 全局
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`属性。 在这里使用数组的索引，因为索引没有绑定到列表中的特定对象。

```json
const people = [
  { name: 'Evan', age: 34 },
  { name: 'Sarah', age: 98 },
  { name: 'James', age: 45 },
];
```

如果我们使用索引将其渲染出来，则会得到以下结果：

```vue
<ul>
  <li v-for="(person, index) in people" :key="index">
    {{ person.name }} - {{ index }}
  </li>
</ul>

// Outputs
Evan - 0
Sarah - 1
James - 2
```

如果删除`Sarah`，得到：

```vue
Evan - 0
James - 1
```

与`James`关联的索引被更改，即使`James`仍然是`James`。 `James`会被重新渲染，这并不是我们希望的。

所以这里，我们可以使用唯一的 `id` 来作为 `key`

```vue
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`即可。

这是一个非常基本的方法

```vue
<template>
  <component-to-re-render :key="componentKey" />
</template>

export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}
```

每次`forceRerender`被调用时，我们的`componentKey`都会改变。当这种情况发生时，Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。

如果确实需要重新渲染某些内容，请选择`key`更改方法而不是其他方法。