• Ukieweb

    佳的博客

    曾梦想仗剑天涯,后来工作忙没去。

如何正确强制 Vue 组件重新渲染 v-if 和 forceupdate 和 key

Vue 是一个多功能且可逐步采用的 JavaScript UI 框架, 只要 JavaScript 状态发生变化,Vue 就会自动更新 DOM。然而,在某些情况下,我们可能需要重新渲染各个组件,避免重新加载整个页面。

1. 什么时候应该在 Vue 中强制更新?

有时,有必要在 Vue 中强制更新,以确保 UI 反映最新的数据或状态更改。让我们回顾一下在 Vue 中强制更新可能合适的一些常见场景或用例。

  • External events 外部事件

  • Custom watchers 自定义观察者

  • Third-party integration 第三方集成

  • Dynamic styling 动态造型

  • Changes to non-reactive data 对非反应性数据的更改

  • Performance optimization 性能优化

  • Legacy codebase 遗留代码库

  • Direct DOM manipulation 直接 DOM 操作

2. 热重载

热重可以更新该组件的所有实例,而不刷新页面,有下面三个方法

v-if 指令(常用)

只有当 v-if 的条件true 时,才会渲染这个组件

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

脚本为

export default {
  data() {
    return {
      renderComponent: true,
    };
  },
  methods: {
    async forceRender() {
   
      // Remove MyComponent from the DOM
      this.renderComponent = false;
   
      // Then, wait for the change to get flushed to the DOM
      await this.$nextTick();
    
      // Add MyComponent back in
      this.renderComponent = true;
    }
  }
};

vue 内置 forceUpdate  方法

正如 Vue 官方文档所推荐的,内置forceUpdate方法是手动更新组件的最佳方法之一。


export default {
  methods: {
    ForcesUpdateComponent() {
    
      // our code
    
      this.$forceUpdate();  // Notice we have to use a $ here
      
      // our code
    
    }
  }
}

该方法仅存在于组件实例上,因此我们需要发挥一点创意来使用 Vue 3 的 Composition API 来调用它:

import { getCurrentInstance } from 'vue';
const methodThatForcesUpdate = () => {

  // our code

  const instance = getCurrentInstance();
  
  instance.proxy.forceUpdate();
  
  // our code

 };

使用 key (常用)

我们给组件提供一个 key 属性通知 Vue 特定组件连接到特定数据。 如果 key保持不变,则组件不会更改。如果 key 发生变化,Vue 就会知道它需要删除以前的组件生成一个新组件


<template>
  <MyComponent :key="componentKey" />
</template>


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


摘自

https://blog.logrocket.com/correctly-force-vue-component-re-render/




0
0
下一篇:excel 统计剔除周末和指定日期的工作天数

0 条评论

老佳啊

85后,大专学历,中原人士,家里没矿。

由于年轻时长的比较帅气,导致在别人眼里,我一直不谈恋爱的原因是清高,实则是自己的小自卑。最大的人生目标就是找一个相知相爱相容的人,共度余生。

和人相处时如果能感受到真诚,会非常注重彼此的关系,对别人没有什么心机,即使有利益冲突,一般也会以和为贵,因为在这个世界上,物质的东西,从来不会吸引到我。

特别迷恋那些大山大水,如果现在还能隐居,可能早就去了。对那些宏伟的有底蕴的人文景观比较不感冒。

从事于IT行业,却一直对厨房念念不忘,由于身材魁梧,总觉得自己上辈子是个将军,可惜这辈子没当兵,也不会打架。