vue开发中数据更新但视图不刷新的解决方法

目录
  • **解决方法1：静默刷新(使用v-if的特性)
  • 解决方法2:Vue.$set(官方推荐)
  • 解决方法3: Vue.$forceUpdate(手动强制更新视图)
  • 解决方法4:Object.assign(使用修改栈能触发视图更新的特性)
  • 解决方法5:对于数组还可以使用splice方法
  • 总结

我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下：

第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到；

第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,Vue识别不到；

**解决方法1：静默刷新(使用v-if的特性)

在修改值之后将元素销毁,然后在修改后的下一次DOM渲染完成时再显示出来,这样就会触发组件重新加载data的数据进行渲染,data中被修改的数据才是最新的。

解决方法2:Vue.$set(官方推荐)

使用这个api修改的数据会为其添加响应式getter和setter让其拥有数据响应的特性

vm.$set(要操作的对象或数组, 要新增或者修改的数组或对象key, 对应的值)

解决方法3: Vue.$forceUpdate(手动强制更新视图)

因为Vue修改数据是异步执行的,所以视图不会立即更新,会等到下一次dom更新循环结束后统一更新发生在这一次循环中修改的数据,然后同步视图更新,所以我们可以修改后自己手动强制更新视图。

解决方法4:Object.assign(使用修改栈能触发视图更新的特性)

我们都知道Object.assign能拷贝合成一个新对象,所以我们只需要将要修改的值合并成一个新对象然后赋值给data中的对象或数组,这样栈的指向被修改了.触发视图更新

解决方法5:对于数组还可以使用splice方法

(Vue对于数组的操作能识别变化的api包括push()、pop()、shift()、unshift()、splice()、sort()、reverse()这些都可被vue监测到)

总结

到此这篇关于vue开发中数据更新但视图不刷新解决的文章就介绍到这了,更多相关vue视图不刷新内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue中数组和对象更改后视图不刷新的问题

    Vue数据响应原理 官方的解释很清晰: 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因. 用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修

  • vue开发中数据更新但视图不刷新的解决方法

    目录 **解决方法1:静默刷新(使用v-if的特性) 解决方法2:Vue.$set(官方推荐) 解决方法3: Vue.$forceUpdate(手动强制更新视图) 解决方法4:Object.assign(使用修改栈能触发视图更新的特性) 解决方法5:对于数组还可以使用splice方法 总结 我们在开发过程中会碰到数据更新,但是视图并未改变的情况,情况如下: 第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到: 第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,V

  • Vue开发中遇到的跨域问题及解决方法

    Vue开发中遇到的跨域问题及解决方法

    跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 1.jsonp 原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入. 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • swiper在vue项目中loop循环轮播失效的解决方法

    长话短说,在vue(2.5.x)中使用swiper(4.3.3),轮播加了autoplay和loop.observer.observeParents等参数还是很诡异的无法循环轮播: 那么可以这样写代码试试: this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"){ this.swiperImgs = resp.data.data; this.$nextTick

  • vue+element-ui中form输入框无法输入问题的解决方法

    目录 一.问题发现: 二.正确案例与错误原理: 三.问题解决 总结 一.问题发现: 笔者在制作登录页面前端时使用elementui+vue技术,发现输入框无法输入任何内容. 在csdn上查阅很多文章后发现都无法解决,于是去elementui官网进行反复查看才发现问题所在.最终发现问题是input标签中v-model写的不恰当导致无法生效/忘记书写v-model.如果有相同问题的可以看看本文有可能能帮助解决您的问题,下列解决过程以供参考. 二.正确案例与错误原理: 查看官网对于表单Form一栏的使

  • Android开发中的9个常见错误和解决方法

    经过各种各样的整理,以及和热心网友讨论,终于整理出了九种android开发中最常见的问题和解决方案再次跟大家分享下!!有用的话请顶顶帖子,共同进步.好了不多说了,下面是详解! 1. 如果你的项目的R文件不见的话,可以试下改版本号在保存,R文件不见一般都是布局文本出错导致. 2. 布局文件不可以有大写字母 3. 抛出如下错误WARNING: Application does not specify an API level requirement!, 是由于没有指定users sdk的缘故,修改A

  • PHP与MySQL开发中页面出现乱码的一种解决方法

    一般来说,乱码的出现有2种原因,首先是由于编码(charset)设置错误,导致浏览器以错误的编码来解析,从而出现了满屏乱七八糟的"天书",其次是文件被以错误的编码打开,然后保存,比如一个文本文件原先是GB2312编码的,却以UTF-8编码打开再保存.要解决上述乱码问题,首先需要知道开发中哪些环节涉及到了编码: 1.文件编码:指的是页面文件(.html,.php等)本身是以何种编码来保存的.记事本和Dreamweaver在打开页面时候会自动识别文件编码因而不太会出问题.而ZendStud

  • PHP开发中常见的安全问题详解和解决方法（如Sql注入、CSRF、Xss、CC等）

    浅谈Php安全和防Sql注入,防止Xss攻击,防盗链,防CSRF 前言: 首先,笔者不是web安全的专家,所以这不是web安全方面专家级文章,而是学习笔记.细心总结文章,里面有些是我们phper不易发现或者说不重视的东西.所以笔者写下来方便以后查阅.在大公司肯定有专门的web安全测试员,安全方面不是phper考虑的范围.但是作为一个phper对于安全知识是:"知道有这么一回事,编程时自然有所注意". 目录: 1.php一些安全配置(1)关闭php提示错误功能(2)关闭一些"坏

  • 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题

    vue +webpack 项目中数据更新后页面没有刷新问题,ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的URL后加一个时间戳(new Date().getTime()),这样就保证了每一次请求的URL都不同,ie11就会不断的请求接口而不使用缓存数据. 代码如下 if(config.url.indexOf('?')>-1){ config.url = url + config.u

  • 分享12个Vue开发中的性能优化小技巧(实用!)

    分享12个Vue开发中的性能优化小技巧(实用!)

    目录 前言 1.长列表性能优化 1.不做响应式 2.虚拟滚动 2.v-for遍历避免同时使用v-if 3.列表使用唯一key 4.使用v-show复用DOM 5.无状态的组件用函数式组件 6.子组件分割 7.变量本地化 8.第三方插件按需引入 9.路由懒加载 10.keep-alive缓存页面 11.事件的销毁 12.图片懒加载 总结 前言 性能优化,是每一个开发者都会遇到的问题,特别是现在越来越重视体验,以及竞争越来越激烈的环境下,对于我们开发者来说,只完成迭代,把功能做好是远远不够的,最重要

随机推荐