位置: IT常识 - 正文

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

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

推荐整理分享✝️ 强制 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 DOMawait 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; } }};

执行流程:

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

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

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

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

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

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

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

这可行,但这不是一个很好的解决方案,我称之为 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。

本文链接地址:https://www.jiuchutong.com/zhishi/288863.html 转载请保留说明!

上一篇:罗弗敦群岛的北极冲浪之旅,挪威罗弗敦大师赛 (© Nicolás Pina/Tandem Stills + Motion)(挪威罗弗敦岛)

下一篇:梵净山,中国西南部 (© zhuxiaophotography/Shutterstock)(梵净山原名)

  • 网络推广有哪些方法,推广工具有哪些(网络推广有哪些工作岗位)

    网络推广有哪些方法,推广工具有哪些(网络推广有哪些工作岗位)

  • iqoo8pro怎么取消录制王者荣耀时的弹窗(iQOO8Pro怎么取消按键震动)

    iqoo8pro怎么取消录制王者荣耀时的弹窗(iQOO8Pro怎么取消按键震动)

  • adobe flash是什么(adobeflash是什么软件可以删除吗?)

    adobe flash是什么(adobeflash是什么软件可以删除吗?)

  • 苹果序列号c开头什么意思(苹果序列号C开头是什么版本)

    苹果序列号c开头什么意思(苹果序列号C开头是什么版本)

  • win7系统连接不上iPhone热点(win7系统连接不到网络打印机)

    win7系统连接不上iPhone热点(win7系统连接不到网络打印机)

  • 对方改了抖音号能不能找到(对方改了抖音号还能搜到吗)

    对方改了抖音号能不能找到(对方改了抖音号还能搜到吗)

  • 抖音如何不显示道具(抖音如何不显示粉丝灯牌)

    抖音如何不显示道具(抖音如何不显示粉丝灯牌)

  • 抖音给主播点赞有什么用(抖音给主播点赞怎么看点到了多少)

    抖音给主播点赞有什么用(抖音给主播点赞怎么看点到了多少)

  • 苹果手机美版无锁什么意思(苹果手机美版无锁和有锁的区别)

    苹果手机美版无锁什么意思(苹果手机美版无锁和有锁的区别)

  • 6s电池容量(vivos76s电池容量)

    6s电池容量(vivos76s电池容量)

  • 骁龙712aie和712有什么区别(骁龙712相当于联发科)

    骁龙712aie和712有什么区别(骁龙712相当于联发科)

  • 全球上网插件能卸载吗(全球上网工具)

    全球上网插件能卸载吗(全球上网工具)

  • 笔记本电脑可以分屏吗(笔记本电脑可以换cpu吗?)

    笔记本电脑可以分屏吗(笔记本电脑可以换cpu吗?)

  • a2152是什么型号几寸(a2152是什么型号什么时候上市的)

    a2152是什么型号几寸(a2152是什么型号什么时候上市的)

  • vivo手机逆光拍照怎样设置(vivo手机逆光拍照的好处)

    vivo手机逆光拍照怎样设置(vivo手机逆光拍照的好处)

  • 美图t9怎么强制关机(美图T9怎么强制重启)

    美图t9怎么强制关机(美图T9怎么强制重启)

  • 抖音评论语怎么复制(抖音评论的话语)

    抖音评论语怎么复制(抖音评论的话语)

  • 机械表日期不准啥原因(机械表日期不准不到晚上12点就跳了怎么调整)

    机械表日期不准啥原因(机械表日期不准不到晚上12点就跳了怎么调整)

  • 苹果7基带坏了怎么修复(苹果7基带坏了激活教程2021)

    苹果7基带坏了怎么修复(苹果7基带坏了激活教程2021)

  • evral00是什么型号(evrtl00)

    evral00是什么型号(evrtl00)

  • iphonex有哪些功能(iphonex有什么功能是我们不知道的)

    iphonex有哪些功能(iphonex有什么功能是我们不知道的)

  • 日南市的萤火虫,日本鸟取县 (© north-tail/Getty Images Plus)(日本的萤火虫)

    日南市的萤火虫,日本鸟取县 (© north-tail/Getty Images Plus)(日本的萤火虫)

  • 【计算机视觉】图像增强——图像的形态学操作(计算机视觉的未来发展方向有哪些)

    【计算机视觉】图像增强——图像的形态学操作(计算机视觉的未来发展方向有哪些)

  • 织梦模板DEDECMS自定义表单限制同一IP提交次数(织梦模板安装完整教程)

    织梦模板DEDECMS自定义表单限制同一IP提交次数(织梦模板安装完整教程)

  • 免交增值税怎么账务处理
  • 金税盘年费能全额抵扣吗
  • 所得税汇算清缴调整项目
  • 建筑劳务发票是全额抵扣吗
  • 融资租赁的两种模式
  • 个体户一年能开多少普票
  • 期间费用的界定
  • 小规模开专票的条件
  • 非营利组织免交的增值税转入哪个科目
  • 购进货物没有发票接受虚开判刑案例
  • 收购公司财务如何管理
  • 长期股权投资的4个明细科目
  • 托收承付和委托收款的含义和相同之处
  • 资本回收系数等于什么系数与利率之和
  • 单位租个人房屋怎么开票
  • 运输过程中货物丢失
  • 库存虚增怎么调账
  • 外资企业投资国内企业程序
  • 分公司用总公司盖章说明
  • 日记账的填制
  • 待摊费用属于什么费用
  • 一般纳税人和小规模纳税人的区别
  • 附加税有哪些税种
  • bios咋进入
  • 优酷路由宝是什么东西
  • 月底财务为什么要关账,暂时开不了发票
  • wlms.exe是什么
  • inclooder.exe
  • php教程100
  • 流转税政策
  • 价税款均未支付
  • Glastonbury Tor, Somerset, England (© DEEPOL by plainpicture/Adam Burton)
  • 大溪地海岛在什么地方
  • 销售货物的收入总额包括什么
  • vue发送post请求如何传两个参数
  • php调用微信扫描二维码
  • 实用工具书推荐
  • 升级nodejs到最新版本
  • pytorch创建模型
  • 网易游戏二面
  • 企业增值税发票管理办法
  • 农业种植公司有补贴吗
  • 公司对自己内部的要求
  • 电脑自学网站推荐
  • dede织梦怎么转成zblog
  • 人民币报关可以收美金吗
  • 融资租赁期间的维修费由谁承担
  • 发票清单用什么章
  • 租金摊销会计分录
  • 银行承兑汇票贴现利息怎么算
  • 库存和结存
  • 被选为工会代表
  • 旅游费用如何记账科目
  • 个体工商户怎样申请开票
  • 开红字发票后再开蓝字发票如何入账
  • win10预览版选哪个
  • windows优化软件哪个好
  • 虚拟机中的centos怎么联网
  • openbsd6.8
  • win10周年更新版是什么意思
  • mac安装字体方法
  • centos7安装视频教程
  • Win10 Mobile Build 10586.29更新内容大全:修复多项问题
  • win7复制过的内容在哪
  • win7电脑没有显示无线网络
  • linux如何使用双屏
  • linux扩充inode
  • ubuntu搭建android开发环境
  • Unity3D游戏开发培训课程大纲
  • android开发项目实战+源码教程
  • css中有序列表
  • Python selenium爬取table
  • js中调用java
  • 离线开票金额为0
  • 季度申报怎么更正
  • 设立新的机构或开办新的业务
  • 电子税务网没开通怎么办
  • 车船税与船舶吨税法律制度ppt
  • 宜昌市西陵区国税局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设