✝️ 强制 Vue 重新渲染组件的正确方法

有时 Vue 的 reactivity 不符合需求,你需要重新渲染一个组件,或者可能只是想remove当前的 DOM 并 re-render。那么如何让 Vue 以正确的方式重新加载组件呢?

强制 Vue 重新渲染组件的最佳方法是在组件上设置一个:key。当需要重新渲染组件时,只需更改键的值,Vue 就会重新渲染组件。

这称为Key-Changing Technique,这是一个非常简单的解决方案,让我们看看还有其他的解决方案吧。

在这篇文章中,我们将看看解决这个问题的方法,这些方法在 Vue 2 和 Vue 3 中都有效:

  • ❌ 方式1:重新加载整个页面
  • 🔪 方法2:使用v-if hack
  • 👌 方法3:使用 Vue 内置的forceUpdate方法
  • ✅ 方法4:使用 Key-Changing Technique 来刷新你的组件

❌ 方式1:重新加载整个页面

reload,这没啥好说了,也不建议这样做。

🔪 方法2:使用v-if hack

一个稍微好一点的解决方案是巧妙地使用v-if指令。

在代码中,将在要重新加载的组件上添加指令:v-if

<template> 
	<MyComponent  v-if="renderComponent" /> 
</template>

script setup 中可以添加 forceRerender方法,然后使用 nextTick:

import { nextTick, ref } from 'vue';
const renderComponent = ref(true);

const forceRerender = async () => {
  // Remove MyComponent from the DOM
  renderComponent.value = false;

	// Wait for the change to get flushed to the DOM
	await nextTick();

	// Add the component back in
  renderComponent.value = true;
};

Options API 的写法:

export default {
  data() {
    return {
      renderComponent: true,
    };
  },
  methods: {
    async forceRerender() {
      // Remove MyComponent from the DOM
      this.renderComponent = false;

			// Wait for the change to get flushed to the DOM
      await this.$nextTick();

      // Add the component back in
      this.renderComponent = true;
    }
  }
};

执行流程:

  1. 最初renderComponent设置为true,因此MyComponent呈现
  2. 当调用forceRerender时,set renderComponentfalse
  3. MyComponent组件消失,因为renderComponentfalse
  4. 然后 nextTick,renderComponent回到true
  5. 重新开始渲染一个刷新的实例 MyComponent

有两部分对于理解其工作原理很重要。

首先,next tick,才能看到变化。

在 Vue 中,一个 tick 是一个单一的 DOM 更新周期。Vue 将收集在同一个 tick 中进行的所有更新,并且在 tick 结束时,它将根据这些更新更新渲染到 DOM 中的内容。

如果没等到next tick,更新renderComponent将自行取消,什么都不会改变。

其次,当第二次渲染时, Vue 将创建一个全新的组件,因为 Vue 会销毁第一个并创建一个新的。这意味着newMyComponent将像往常一样经历它的所有生命周期—— createdmounted等等。

这可行,但这不是一个很好的解决方案,我称之为 hack,因为我们正在围绕 Vue 希望我们做的事情进行 hack。

👌 方法3:使用 Vue 内置的forceUpdate方法

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

通常,Vue 会通过更新视图来响应依赖项的变化。但是,当调用forceUpdate 时,可以强制进行更新,即使实际上没有任何依赖项发生更改。

这绕过了Vue的reactivity,这就是为什么不推荐将其作为解决方案的原因。

但有时,Vue的reactivity 会令人困惑,有时候我们认为 Vue 会对某个属性或变量的变化做出反应,但事实并非如此。如果使用的是 Vue 2,在某些情况下,Vue 的反应系统根本不会检测到任何更改。但是 Vue 3 有一个更强大的基于代理的反应系统,基本不会遇到这些相同的问题。

以下是forceUpdate使用 Options API 调用的方法:

export default {
  methods: {
    methodThatForcesUpdate() {
      this.$forceUpdate();
    }
  }
}

在 Vue 3 中使用 Composition API 调用:

import { getCurrentInstance } from 'vue';

const methodThatForcesUpdate = () => {
  const instance = getCurrentInstance();
  instance.proxy.forceUpdate();
};

重要提示:调用forceUpdate只会强制视图重新渲染

✅ 方法4:使用 Key-Changing Technique 来刷新你的组件

在许多情况下,会强制刷新组件的需求。为了以正确的方式做到这一点,我们将提供一个key属性,以便 Vue 知道特定的组件与特定的数据片段相关联。如果 key 保持不变,它不会改变组件,但如果 key 确实改变了,Vue 知道它应该销毁旧组件并创建一个新组件

这是强制 Vue 刷新组件的最佳方式(在我看来)。

我们向组件添加一个key属性,然后在需要重新渲染组件时更改该键。

这是一个非常基本的方法script setup

<template>
  <MyComponent :key="componentKey" />
</template>
import { ref } from 'vue';
const componentKey = ref(0);

const forceRerender = () => {
  componentKey.value += 1;
};

Options API 的写法:

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

每次forceRerender调用时componentKey都会改变。发生这种情况时,Vue 将知道它必须销毁组件并创建一个新组件。你得到的是一个子组件,它将重新初始化自身并“重置”它的状态,强制刷新并重新渲染组件。


请记住,如果您发现自己需要强制 Vue 重新渲染组件,可能有更好的方法。

但是,如果确实需要重新渲染某些内容,请选择 Key-Changing Technique

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>