位置: 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)(梵净山原名)

  • 怎么单独给b站设置静音(怎么单独给b站设置静音ipad)

    怎么单独给b站设置静音(怎么单独给b站设置静音ipad)

  • 三星buds2防水等级(三星galaxy buds pro防水)

    三星buds2防水等级(三星galaxy buds pro防水)

  • 华为手机怎么设置对特定人不静音(华为手机怎么设置24小时时间显示)

    华为手机怎么设置对特定人不静音(华为手机怎么设置24小时时间显示)

  • 华为ax3路由器怎么设置(华为ax3路由器怎么设置2.4g)

    华为ax3路由器怎么设置(华为ax3路由器怎么设置2.4g)

  • 怎样取消支付宝的刷脸支付(怎样取消支付宝亲情卡)

    怎样取消支付宝的刷脸支付(怎样取消支付宝亲情卡)

  • 手机传感器坏了有什么影响(手机传感器坏了是什么原因造成的)

    手机传感器坏了有什么影响(手机传感器坏了是什么原因造成的)

  • 电脑熄屏 按什么键唤醒(电脑熄屏 按什么键关机)

    电脑熄屏 按什么键唤醒(电脑熄屏 按什么键关机)

  • 安装虚拟机对电脑有什么影响(安装虚拟机对电脑硬件有什么要求)

    安装虚拟机对电脑有什么影响(安装虚拟机对电脑硬件有什么要求)

  • 主机包括什么(微机硬件系统主机包括什么)

    主机包括什么(微机硬件系统主机包括什么)

  • md510ch/a是ipad几代(ipad md510ch/a是什么型号)

    md510ch/a是ipad几代(ipad md510ch/a是什么型号)

  • qq扩列聊天匹配失败(qq扩列匹配功能)

    qq扩列聊天匹配失败(qq扩列匹配功能)

  • 十进制256转换为二进制结果是(十进制256转换为八进制)

    十进制256转换为二进制结果是(十进制256转换为八进制)

  • iphonex待机耗电快怎么回事(苹果x正常待机耗电多少)

    iphonex待机耗电快怎么回事(苹果x正常待机耗电多少)

  • 苹果7plus能升级13.3吗(苹果7plus能升级16吗)

    苹果7plus能升级13.3吗(苹果7plus能升级16吗)

  • 运营网络自动暂停是怎么回事(公司送给员工开工礼物)

    运营网络自动暂停是怎么回事(公司送给员工开工礼物)

  • a1533可以用移动卡吗(iphone5 a1533可以用移动卡吗)

    a1533可以用移动卡吗(iphone5 a1533可以用移动卡吗)

  • 图片属于什么媒体(图片属于什么数据)

    图片属于什么媒体(图片属于什么数据)

  • ipad可以装ps吗(ipad上能装ps吗)

    ipad可以装ps吗(ipad上能装ps吗)

  • 华为手机通知管理在哪(华为手机通知管理在哪里)

    华为手机通知管理在哪(华为手机通知管理在哪里)

  • 怎样刷支付宝出地铁站(支付宝出行怎么刷卡)

    怎样刷支付宝出地铁站(支付宝出行怎么刷卡)

  • 免拼成功了还要钱吗(免拼成功还要付钱么)

    免拼成功了还要钱吗(免拼成功还要付钱么)

  • leglon是什么电脑(leglon是什么牌子的电脑)

    leglon是什么电脑(leglon是什么牌子的电脑)

  • 手机话费充错了可以撤销吗(手机话费充错了可以退回来吗)

    手机话费充错了可以撤销吗(手机话费充错了可以退回来吗)

  • 帝国cms怎么更新(帝国cms配置数据库)

    帝国cms怎么更新(帝国cms配置数据库)

  • 已知税金及附加怎么算增值税
  • 如何分辨海关完税凭证的真假?
  • 一般纳税人销售自己使用过的汽车
  • 应纳税所得额就是企业所得税吗
  • 补开发票怎么做分录?
  • 办公室零食采购台账
  • 买体育彩票收银配比是多少
  • 产品成本科目包括
  • 该纳税人不属于经备案的二手车企业
  • 沥青混凝土增值税风险
  • 废旧物资销售如何征税
  • 信用减值损失编码
  • 企业如何增加净资产
  • 主营业务收入少记跨年怎么办
  • 新公司值得入职吗
  • 电子发票无法预览怎么弄
  • 税务申报利润表本期金额
  • 什么叫抵免
  • 小规模纳税人代账一年多少钱
  • 外籍人员工资个税
  • 个人所得税生产经营所得
  • 民非企业缴纳税额怎么算
  • ukey开票界面
  • win10专业版版本号2009
  • 利息支出属于生产成本吗
  • 水养绿萝怎么养护长得才茂盛
  • php的脚本语言
  • 固定资产计算折旧时用扣除减值吗
  • 预计负债和预收账款
  • css 单行显示
  • 仙岩寺庙
  • 分页page
  • php使用pdo连接数据库
  • 简述php操作mysql数据库的基本步骤
  • 关于低值易耗品的说法中不正确的是
  • 企业微信如何微信认证
  • 归还股东投资款
  • 暂估库存商品计算怎么算
  • 其他综合收益涉及到的业务
  • 类型string
  • 教大家8天学通MongoDB——第一天 基础入门篇
  • 停工期间工资支付标准
  • 公司成立开的户叫什么
  • 新公司第一年年度总结
  • 其他权益工具投资出售时账务处理
  • 简易征收应纳税额
  • 跨年成本少结转如何调整
  • 资金占用费如何计算企业所得税
  • 公司的进账能打到私人卡上
  • 发票丢了能做账吗
  • sql server数据存放位置
  • mysql触发器语句
  • sql批量导出数据
  • winxp和win7共享
  • win7防火墙如何添加允许
  • win7双击文件无反应
  • 进程mmc.exe
  • win7鼠标右键菜单选项太多怎么删除
  • xp系统设置共享显存
  • linux系统安装程序
  • Extjs4.0 ComboBox如何实现三级联动
  • 垂直翻转画布
  • data.table
  • css优化提高性能的方法有哪些
  • 批处理 输出换行
  • js的select
  • jquery配合.NET实现点击指定绑定数据并且能够一键下载
  • python如何调用c程序
  • jquery java
  • express.js教程
  • jquery实现自动轮播
  • javascript面向对象编程指南
  • 求行驶时间的公式
  • jquery中if语句
  • 江苏省增值税专用发票怎么开
  • 增值税税控开票软件密码不知道了怎么办
  • 国家税务总局72号文件
  • 在监狱要花钱吗
  • 企业年检里的纳税是什么
  • 中华人民共和国道路交通安全法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设