知识拓展

在一个组件实例中，只有在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数据更新视图不更新的几种解决方案相关推荐

vue使用echarts图表自适应的几种解决方案
这篇文章主要给大家介绍了关于vue使用echarts图表自适应的几种解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 1. ...
react ant table删除后数据更新视图不更新
调用了删除接口后,接口返回了新的数据,但是视图没有更新这样情况下重新复制给table视图是不更新的. 那么可以使用table的更新api import React, { useState, useE ...
（一）vue 数据更新试图不更新解决办法
一: 深拷贝深拷贝原数组出来,修改深拷贝的数组后,再把深拷贝的数组重新赋值到视图渲染数组. this.directData.forEach((ele, index) => {if (ele.n ...
Vue数据改变视图不更新的问题
首先说下在什么情况下会出现这种情况以及解决方案在vue2中用数组下标修改值时或者新增对象Key值时这样vue的devsrve函数是监听不到数据的变化的所以就会导致数据更新视图未更新 1.数组利用下 ...
dom不刷新 vue 加数据后_详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结...
如果你发现你自己需要在 vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 vue 会在初 ...
callback回调使用 vue_Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸
1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property ...
Vue数据更新但页面没有更新的多种情况
Vue数据更新但页面没有更新的多种情况 1.Vue 无法检测实例被创建时不存在于 data 中的变量原因:由于 Vue 会在初始化实例时对 data中的数据执行 getter/setter 转化, ...
safair中vue修改了数据，但是视图没有更新解决方案
使用vuex,也适用了splice来改数据, 修改了评论的数据,但是视图没有更新. state.tabContainer.splice(index, 1, {info: info}); 查看dom元素 ...
Vue中的Diff算法 patch函数-简单Diff算法-双端Diff算法-快速Diff算法-当数据发生改变，视图如何更新？
文章目录 Vue中的Diff算法概述前置知识 patch方法简单Diff算法总结双端Diff算法 --vue2 快速Diff算法 --vue3 vue2和vue3 Diff算法的区别当数据 ...
vue数组中数据变化但是视图没有更新解决方案
vue数组中数据变化但是视图没有更新解决方案参考文章: (1)vue数组中数据变化但是视图没有更新解决方案 (2)https://www.cnblogs.com/sufubo/p/6906261.h ...

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