Vue에서 구성 요소를 올바르게 다시 렌더링하는 방법은 무엇입니까? (방법 소개)

때때로 데이터 업데이트에 대한 Vue의 응답성에 의존하는 것만으로는 충분하지 않습니다. 대신 데이터를 업데이트하기 위해 구성 요소를 수동으로 다시 렌더링해야 합니다. 아니면 현재 DOM을 버리고 다시 시작하고 싶을 수도 있습니다. 그렇다면 Vue를 통해 구성 요소를 올바른 방식으로 다시 렌더링하려면 어떻게 해야 할까요?

Vue가 구성 요소를 다시 렌더링하도록 하는 가장 좋은 방법은 구성 요소에 :key를 설정하는 것입니다. 컴포넌트를 다시 렌더링해야 하는 경우 key 값만 변경하면 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이것은 매우 간단한 솔루션입니다.

물론, 다른 방법에 더 관심이 있을 수도 있습니다:

• 간단하고 조잡한 방법: 전체 페이지를 다시 로드
• 부적절한 방법: v-if 사용 >
• 더 나은 방법: Vue에 내장된 forceUpdate 메서드 사용
• 가장 좋은 방법: 구성 요소 /code>의 key

🎜🎜간단하고 투박한 방법: 전체 페이지를 다시 로드🎜🎜🎜🎜이는 매번 애플리케이션을 닫는 것과 같습니다. 매번 컴퓨터를 다시 시작하세요. 🎜🎜🎜🎜🎜이 접근 방식은 효과가 있을 수 있지만 매우 나쁜 해결책입니다. 🎜하지 마세요🎜, 더 나은 방법을 살펴보겠습니다. 🎜🎜🎜부적절한 방법: 🎜🎜v-if🎜🎜🎜🎜v-if 명령을 사용하세요. 지시문은 구성 요소가 true인 경우에만 렌더링됩니다. false인 경우 구성요소가 🎜DOM🎜에 존재하지 않는 것입니다. 🎜🎜v-if가 어떻게 작동하는지 살펴보겠습니다. template에 v-if 지시어를 추가하세요: 🎜

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

🎜In 스크립트 , nextTick 메소드를 사용하세요 🎜

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

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

🎜위의 과정은 대략 다음과 같습니다: 🎜

1. 처음에는 renderComponent가 설정됩니다 true로 설정하면 my-comComponent 구성 요소를 렌더링합니다.
2. forceRerender를 호출하면 즉시 renderComponent<code>false로 설정
3. v-if 지시문이 이제 my-comComponent로 평가되므로 렌더링을 중지합니다. code >false
4. nextTick에서 renderComponent를 true
5. 로 다시 설정하세요. 메소드 v-if 명령의 계산 결과가 true이면 my-comComponent

를 다시 렌더링합니다. 이 프로세스에는 더 중요한 두 부분이 있습니다🎜🎜먼저 nextTick까지 기다려야 합니다. 그렇지 않으면 변경 사항이 표시되지 않습니다. 🎜🎜🎜Vue🎜에서는 1틱이 DOM 업데이트 주기입니다. Vue는 동일한 틱에서 이루어진 모든 업데이트를 수집하고 틱이 끝나면 해당 업데이트를 기반으로 DOM의 콘텐츠를 렌더링합니다. 다음 틱까지 기다리지 않으면 renderComponent 업데이트가 자동으로 취소되고 아무 것도 변경되지 않습니다. 🎜🎜두 번째로, 두 번째로 렌더링할 때 Vue는 완전히 새로운 구성 요소를 생성합니다. Vue는 첫 번째 것을 파괴하고 새로운 것을 생성합니다. 이는 새로운 my-comComponent가 created, mounted등 🎜🎜또한, nextTick은 promise와 함께 사용할 수 있습니다:🎜

Evan - 0
James - 1

🎜그러나 이것은 그다지 좋은 해결책이 아니므로 Vue가 원하는 대로 합시다🎜🎜🎜더 나은 방법: forceUpdate 방법🎜🎜🎜🎜이 문제를 해결하는 가장 좋은 두 가지 방법 중 하나이며, 둘 다 Vue에서 공식적으로 지원됩니다. 🎜🎜일반적으로 Vue는 뷰를 업데이트하여 종속성 변경에 응답합니다. 그러나 forceUpdate를 호출하면 모든 종속성이 실제로 변경되지 않은 경우에도 강제로 업데이트할 수도 있습니다. 🎜🎜이 방법을 사용할 때 대부분의 사람들이 저지르는 가장 큰 실수는 다음과 같습니다. 🎜🎜상황이 바뀔 때 Vue가 자동으로 업데이트된다면 강제로 업데이트해야 하는 이유는 무엇입니까? 🎜🎜그 이유는 Vue의 응답 시스템이 때때로 혼란스러울 수 있기 때문입니다. 우리는 Vue가 특정 속성이나 변수의 변경에 응답할 것이라고 생각하지만 실제로는 그렇지 않습니다. 어떤 경우에는 Vue의 반응 시스템이 변경 사항을 전혀 감지하지 못하는 경우도 있습니다. 🎜🎜이전 방법과 마찬가지로 구성 요소를 다시 렌더링하는 데 이 방법이 필요한 경우 더 나은 방법이 있을 수 있습니다. 🎜🎜구성 요소 인스턴스 자체에서 그리고 전역적으로 forceUpdate를 호출하는 두 가지 방법이 있습니다. 🎜

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>

🎜중요: 이 방법은 계산된 속성을 업데이트하지 않으며 forceUpdate를 호출하면 다시 강제 업데이트됩니다. -뷰를 렌더링합니다. 🎜🎜🎜가장 좋은 방법: 구성 요소에서 🎜🎜키를 변경합니다🎜🎜🎜🎜많은 경우 구성 요소를 다시 렌더링해야 합니다. . 🎜

要正确地做到这一点，我们将提供一个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 중국어 웹사이트의 기타 관련 기사를 참조하세요!