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

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

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

在data中定义一个阈值,比如show，初始为true;代码实现：this.show = false;
setTimeout(() => {this.show = true},0)

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

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项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
vue 项目中H5页面，实现大转盘活动
vue 项目中H5页面,实现大转盘活动 <template><div class="about"><div id="app"> ...
vue项目中修改页面logo和标题
第一步:把图片转成icon格式(比特虫转换工具),建议尺寸为16*16. 第二步:将图标重命名为"favicon.ico",并放在项目根目录下. 第三步:然后在index.html ...
vue项目中-打印页面中部分区域的内容
在项目的开发中遇到了点击打印,需要打印页面中部分的表格,实现方式如下首先将需要打印的内容包裹起来:例如 <div id="subOutputRank-print">& ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
vue项目keepAlive保持页面状态（详情页返回列表页不刷新）
vue项目keepAlive保持页面状态(详情页返回列表页不刷新) 在vue项目中,存在从列表页跳转到详情页查看,而后又返回列表页的操作时,如果列表过长,我们往往希望从详情页返回列表页时,列表页能留在 ...
Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法 this.$router.go(0) location.reload() 跳转空白页再跳回原页面使用provide / inject ...

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

vue项目中数据更新页面不刷新问题相关推荐

最新文章

热门文章