• 技术文章 >web前端 >前端问答

    vue不刷新当前页面怎么办

    藏色散人藏色散人2023-01-05 15:17:58原创119

    vue不刷新当前页面的解决办法有:1、在data中定义一个阈值,代码如“this.show = false;setTimeout(() => {this.show = true},0)”;2、在数据都处理完成后,使用“this.$froceUpdate()”进行强制刷新;3、在数据处理完成之后进行数据重置操作;4、使用“this.$set”全局方法进行数据更新等。

    本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。

    vue不刷新当前页面怎么办?

    vue项目中数据更新页面不刷新问题

    这种情况可以分为很多种.但是究其原因就是vue3.0以下版本无法监听对象(包括数组以及对象)的变化,当数据发生变化的时候vue的刷新机制是监听不到数据变化的,所以需要我们在实际应用过程中通过各种处理来达到页面刷新的目的。

    1.这是一种简单粗暴的解决方案吧,那就是在数据更新完成之后对页面进行重排和重绘操纵,但是这种方式对页面的消耗会急剧上升,不到万不得已还是不要使用的好,具体实现方法如下:

    在data中定义一个阈值,比如show,初始为true;

    代码实现:

    this.show = false;
    setTimeout(() => {
     
      this.show = true
     
    },0)

    2.在数据都处理完成之后,使用this.$froceUpdate()进行强制刷新;

    3.在数据处理完成之后进行数据重置操作,但是值得注意的是这种方式只对对象有效(亲测数组无效,有朋友能搞来的话欢迎留言,让我膜拜一下,嘿嘿),并且这种方式不适用于对象中有键值为引用类型的数据源(针对这种方式,个人觉得可以将引用类型数据显示的模板单独封装一个组件,再在这个组件中进行数据刷新,当然,监听数据变化是必不可少的,这个方法没有测试过,按理说应该没问题)

    let temp = this.data;
    this.data = null;
    this.data = temp

    4.采用官方提供的方法,使用过this.$set全局方法进行数据更新;这里我们要说一下vue的数据绑定机制了;当一个页面创建的过程中,html模板只有只会绑定在data中初始创建的时候已经存在的数据,如果在页面创建之后我们追加数据的话就会出现数据更新了,但是页面却没有刷新的情况,this.$set(数据源,要追加的数据的键 / 在源数据中的索引,新数据)这个方法就是vue官方提供的用于追加数据的,并能够实现页面刷新!

    5.针对数组数据,常见修改数据之后页面不刷新的原因有:

    那么在修改数组数据的时候,我们应该使用push(),pop(),shift(),unshift(),splice(),sort(),reverse()等原生的方法去操作数据,因为vue可以直接检测这些方法所带来的数组数据变化。

    6.数据不刷新最根本的原因还是因为vue认为模板结构没有更新,所以不会生成新的虚拟的dom,所以我们可以为需要更新的dom添加一个会由操作结束而发生变化的key值,这样就会刷新了(这是最近学到的一个新技能,再来补充一下)。

    推荐学习:《vue视频教程

    以上就是vue不刷新当前页面怎么办的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue
    上一篇:react创建元素的方法是什么 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • vue打包刷新报错怎么办• vue项目部署乱码怎么办• 【整理汇总】45+个Vue面试题,带你巩固知识点!• 一文带你详细了解Vue脚手架
    1/1

    PHP中文网