Vue数据更新视图不更新的几种解决方案小结

目录
  • Vue数据更新视图不更新的几种解决
    • 知识拓展
    • 对象属性的添加或删除
    • 异步更新队列
    • Object.assign方法
    • vue多层循环
  • Vue更改了数据但是视图却没有更新

Vue数据更新视图不更新的几种解决

知识拓展

在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。

Vue不允许在已经创建的实例上动态添加根级响应式属性，但是可以使用$set方法将相应属性添加到嵌套的对象上。

数组数据变动，使用某些方法操作数组，变动数据时，有些方法无法被vue监测

push()，pop()，splice()，sort()，reverse()可被vue检测到 filter(), concat(), slice()。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组。

vue不能检测以下变动的数组：

1、当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue

2、当你修改数组的长度时，例如： vm.items.length = newLength

对象属性的添加或删除

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

解决办法：

使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

Vue.set(vm.someObject, 'b', 2) 或者 this.$set(this.someObject,'b',2) （这也是全局 Vue.set 方法的别名）

异步更新队列

在最新的项目中遇到了这种情况，数据第一次获取到了，也渲染了，但是第二次之后数据只有在再一次渲染页面的时候更新，并不能实时更新。

网上查了资料才知道，Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

解决办法：

可在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数在 DOM 更新完成后就会调用。例如：

因为 $nextTick()返回一个 Promise 对象，所以可以使用新的 ES2016 async/await语法完成相同的事情：

Object.assign方法

object.assign方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。

vm.object = Object.assign( { } , vm.object , {a:' 1 ', b:' 2 ' })

注：object必须是已经声明的对象

关于Object.assign方法更多内容，请访问《Object.assign()》

vue多层循环

动态改变数据后渲染的很慢或者不渲染

可在动态改变数据的方法，第一行加上

this.$forceUpdate();

Vue更改了数据但是视图却没有更新

1.Vue不能检测到对象属性的添加或删除，没有在对象里声明的属性不是响应的。

2.用在v-for里面数据层次太多，render函数没有自动更新，需手动强制刷新

vm.$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

https://cn.vuejs.org/v2/api/#vm-forceUpdate

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue数据更新但页面没有更新的多种情况问题及解决

    目录 数据更新但页面没有更新的多种情况 1.Vue无法检测实例被创建时不存在于data中的变量 2.vue也不能检测到data中对象的动态添加和删除 3.数组的时候 4.异步获取接口数据,DOM数据不发现变化 5.循环嵌套层级太深,视图不更新 6.路由参数变化时,页面不更新(数据不更新) 强制更新数据 this.$forceUpdate() 数据更新但页面没有更新的多种情况 1.Vue无法检测实例被创建时不存在于data中的变量 原因:由于 Vue 会在初始化实例时对 data中的数据执行 ge

  • vue中v-for数据状态值变了,但是视图没改变的解决方案

    vue中v-for数据状态值变了,但是视图没改变的解决方案

    目录 v-for数据状态值变了,但是视图没改变 问题现象 问题出现原因 问题解决 v-for循环改变循环数据视图不更新 解决1 解决2 v-for数据状态值变了,但是视图没改变 问题现象 1.你在v-for中列表的每个item都有个按钮,你点击按钮,想把按钮的类名通过一个属性show,type为boolean来动态的选择 2.v-show通过每个item这个show的true还是false来显示 最后发现你在点击后,输出发现,true,false都有变,但是感觉似乎试图没有重新渲染.通过搜索,发

  • 解决vue中数据更新视图不更新问题this.$set()方法

    目录 vue数据更新视图不更新 解决问题 vue数据不更新的原因(数据更改了,但是视图没有更新) 解决办法 具体流程如下 数组更新检测 注意事项 对象更改检测注意事项 vue数据更新视图不更新 1.data中有对象obj :{name:'远航',age:18} 2.此时新增phone this.obj.phone = '123456' 再次更新 用this.obj.phone = '654321' 视图未更新  用this.$set(this.obj,"phone", "65

  • 解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)

    1.问题描述:在echarts弹框中嵌入echarts,在页面数据改变时,echarts视图不更新: 2.解决办法: 数据更新时以为drawLine()函数在updated()里面执行(这种情况之前碰到过),后来发现热更新之后视图更新了,所以跟周期函数没有关系:参考了一下网上的一些资料,发现可以用vue中的watch()函数来监听数据的更新,一旦数据更新了,那么就在watch()函数中调用drawLine()函数,发现视图更新了,完美解决. 补充知识:vue echarts line动态刷新数据

  • 解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)

    一.在我们使用vue进行开发的过程中,可能会遇到一种情况: 当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新.它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 ,需要用vue内置的方法 二.Vue.set() 响应式新增与修改数据 此时我们需要知道Vue.set()需要哪些参数,官方API:https://cn.vuejs.org/v2/api/#Vue-set 调用方法:

  • Vue数据更新视图不更新的几种解决方案小结

    Vue数据更新视图不更新的几种解决方案小结

    目录 Vue数据更新视图不更新的几种解决 知识拓展 对象属性的添加或删除 异步更新队列 Object.assign方法 vue多层循环 Vue更改了数据但是视图却没有更新 Vue数据更新视图不更新的几种解决 知识拓展 在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或删除,没有在data里声明的属性不是响应的. Vue不允许在已经创建的实例上动态添加根级响应式属性,但是可以使用$set方法将相应属性添加到嵌套的对象上. 数组数据变动,使用某些方法操作数组,

  • vue data引入本地图片的两种方式小结

    我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return { imgsrc: require('../../images/ICON-electronicbilling.png') } } } </script> 第二种 <template> <img :s

  • vue 获取url里参数的两种方法小结

    我就废话不多说了,大家还是直接看代码吧~ 第一种: const query = Qs.parse(location.search.substring(1)) let passport = query.passport; 第二种: var query=this.$route.query; let lat = query.lat; 补充知识:Vue通过query获取路由参数 现在来讲Vue通过query获取路由参数 可以看见com1组件里的路由参数为 name=zhangsan&job=teache

  • vue使用echarts图表自适应的几种解决方案

    vue使用echarts图表自适应的几种解决方案

    1.使用window.onresize let myChart = echarts.init(document.getElementById(dom)) window.onresize = function () { myChat.resize() } 优点:可以根据窗口大小实现自适应 缺点: 多个图表自适应写法比较麻烦(当一个页面的图表太多时,这样写法不是很灵活): let myChart1 = echarts.init(document.getElementById(dom1)) let m

  • vue监听路由变化的几种方式小结

    目录 监听路由变化的几种方式小结 一.监听路由从哪儿来到哪儿去 二.监听路由变化获取新老路由信息 三.监听路由变化触发方法 四.全局监听路由 如何在组件中监听路由参数的变化? 方式一: 监听 $route 方式二:通过组件内的导航守卫 监听路由变化的几种方式小结 vue页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?当然是利用VUE中的watch,请看代码. 一.监听路由从哪儿来到哪儿去 watch:{     $route(to,from){       con

  • vue中兄弟组件传值的两种方式小结

    vue中兄弟组件传值的两种方式小结

    目录 一. bus总线传值的使用 二. 使用常规的传值:(子传父,父再传子) 总结 本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式: a. bus总线传值: b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B) 下边开始本次demo的编写: 一. bus总线传值的使用 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单,就是暴露一个vue实例而已. 有人喜欢在main.js全局引入该js文件,我一般在需要使用到

  • 关于sql server批量插入和更新的两种解决方案

    复制代码 代码如下: .游标方式 1 DECLARE @Data NVARCHAR(max)  SET @Data='1,tanw;2,keenboy'   --Id,Name DECLARE @dataItem NVARCHAR(100)  DECLARE data_cursor CURSOR FOR (SELECT * FROM split(@Data,';')) OPEN data_cursor FETCH NEXT FROM data_cursor INTO @dataItem     

  • vue单页缓存存在的问题及解决方案(小结)

    1.css同名覆盖,解决方法:父组件加上scoped <style lang="scss" scoped> @import './unbind.scss' </style> 子组件同名样式加上deep /deep/ .tabs-row { .items-wrp{ padding-left: .34rem; } .item { margin:0 .12rem .16rem 0; } } 2.事件全局绑定 绑在window或document或body上的事件,切换到

随机推荐