首页 > 其他分享 >vue中$forceUpdate的使用

vue中$forceUpdate的使用

时间:2022-08-23 11:35:36浏览次数:150  
标签:vue 更新 forceUpdate 使用 强制 数据 监听

Vue中的$forceUpdate有强制刷新的意思,但是这个针对于深层次结构数据,数据通过赋值进行了更新,但是vue监听不到。
深结构数据
对于普通类型的数据来说,我们不需要操心数据绑定,Vue的内部机制已经帮助我们监听更新,但是对于一个复杂对象来说,例如数组对象、对象数组等,我们对其某个元素增加属性,vue就监听不到了。对照着vue文档规范,我们应该使用 $set来进行数据的操作或者初始化,这样的话vue内部是能够监听到的。

如果不想用 $set 来进行操作,我们就需要使用 $forceUpdate来进行强制刷新,因为你修改了数据,dom层改变,但视图层并没有改变,说明数据本身是修改的,但是vue并没有监听到,使用 $forceUpdate就相当于按照最新数据给重新渲染了一下,强制视图更新。

 

 

 

vue强制更新$forceUpdate()
添加this.$forceUpdate();进行强制渲染,效果实现。搜索资料得出结果:因为数据层次太多,render函数没有自动更新,需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。

 

 

 

 

 


原文链接:https://blog.csdn.net/rememberyf/article/details/113915471

标签:vue,更新,forceUpdate,使用,强制,数据,监听
From: https://www.cnblogs.com/ygyy/p/16615556.html

相关文章

  • vue-router使用addRoute动态添加主界面的子路由
    1、需求描述从别处导出的可用前端文件,存放在系统@/views/下,不配置静态路由,当访问改菜单时,根据当前菜单的path动态向主界面(路由path:'/',name:'homePage')中添加子路由,使......
  • 在树莓派上使用cpolar(番外篇1)
    在之前的系列文章中,我们为大家详细展示了如何借助cpolar创建的数据隧道,将位于内网树莓派上的内容发布到公共互联网上,相信大家已经对cpolar的功能和使用方法有了一定的了解......
  • 格式化代码prettier的使用
    此插件用来格式化代码,使代码哪怕在开发的时候格式混乱,是吧,编译一下,就会变成统一格式。非常适合团队开发使用。这个时候有些同学可能会有个疑问,我的开发工具,比如vscode,可以......
  • better-scroll在终端触屏上滑动失效(vue)
    this.$nextTick(()=>{this.scroll=newBScroll(this.$refs.scroll,{scrollX:true,click:true,disableMouse:false,//启用鼠标拖动disableTouch:false//启用......
  • 使用Photoshop对免疫荧光图片进行Merge操作方法
    如何使用Photoshop对免疫荧光图片进行Merge?这是一种科研文章中常见的修饰手法,如何使得两种荧光染色的图片merge在一起呢,为您分享使用Photoshop对免疫荧光图片进行Merge操作......
  • .NET Core使用 Coravel 实现任务调度
    前言前段时间需要在一个新项目里添加两个后台任务,去定时请求两个供应商的API来同步数据;由于项目本身只是一个很小的服务,不太希望引入太重的框架,同时也没持久化要求;于......
  • Vue3中插槽(slot)用法汇总
    Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。什么是插槽简单来说就是......
  • 动态组件的使用
    父组件:<template><divclass="app"><!--动态组件component--><!--is中的组件需要来自两个地方:1.全局注册的组件2.局部注册的组件-->......
  • centos 7如何使用rar
    说明:windows下rar压缩的文件放到centos7上解压的话,centos7上安装的版本需要大于或是等于windows下安装的版本1.下载wget--no-check-certificatehttps://www.rarlab.......
  • 减少全局变量的使用?使用构造函数和原型对象公用方法函数?
    把函数挂载到构造函数的原型对象上,可以公用这些函数方法;//使用函数表达式的方法创建一个构造函数constOnlyOne=function(){}//在函数的原型上添......