Vue 对象和数据的强制更新方式

目录
  • 对象和数据的强制更新
    • 数组更新
    • 强制更新
  • 更新数据并强制更新视图
    • 对象类型
    • 数组类型
    • 异步类型
    • 强制更新

对象和数据的强制更新

数组更新

以下支持自动更新

  • push() //向后添加
  • pop() //删除最后一个
  • shift() //删除第一个
  • unshift() //向第一个添加元素
  • splice() //向指定位置添加/删除元素
  • sort() //用原地算法对数组的元素进行排序
  • reverse() //将数组中元素的位置颠倒

注意，这种形式修改数据 this.arr[1] = ‘x’ // 不是响应性的，这种情况，可以采用splice方法修改数据即可实现更新

强制更新

this.$set(数组，下标，修改后的值)

eg:this.$set(this.dataArr,1,{})

对象更新

Vue 不能检测对象属性的添加或删除：

强制更新

this.$set(this.obj, ‘age', 27)

参考链接

更新数据并强制更新视图

在开发过程中，有时发现当数据变动后，视图并未更新。那么下面是一些常见示例的和解决办法

对象类型

当对象为引用类型，vue不一定能监控到 所以当我们新建一个对象并赋值给oldObj字段的话，直接改变了它的指向地址=====》对象和数组都能用的方法：

this.$set(this,'oldArray',newArray);
this.$set(this,'oldObj',newObj);
this.$set(this.some.name,‘b',2)

数组类型

这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组。

push()，pop()，shift()，unshift()，splice()，sort()，reverse()可被vue检测到 ，filter(), concat(), slice() 。

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

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

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

异步类型

可在数据变化之后立即使用

Vue.nextTick(callback)

这样回调函数在 DOM 更新完成后就会调用。

强制更新

this.$forceUpdate()，强制视图更新

vue多层循环，动态改变数据后渲染的很慢或者不渲染。

比如v-for里面数据层次太多， 修改过数据变了，页面没有重新渲染，需手动强制刷新。

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

赞 (0)

相关推荐

  • vue改变对象或数组时的刷新机制的方法总结

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

  • Vue 数组和对象更新,但是页面没有刷新的解决方式

    在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化. <ul> <li v-for="(item,index) in todos" :key="index">{{item.name}}</li> </ul> data () { return { msg: 'Welcome to Your Vue.js App', todos: [{ name: 'aa', age: 14 }, { nam

  • 详解Vue 普通对象数据更新与 file 对象数据更新

    最近在做一个多图片上传的组件,需求是做到多文件依次上传,并显示上传进度条. 逻辑部分实现了以后,在更新进度条视图的时候出现一点问题:动态计算生产的进度 progress 属性不会自动更新. 原来的代码是这样写的: let files = this.filePicker.files; if(!files.length) { return; } let arr = []; for(let i = 0, len = files.length; i < len; i++) { let item = fi

  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

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

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

  • Vue 对象和数据的强制更新方式

    目录 对象和数据的强制更新 数组更新 强制更新 更新数据并强制更新视图 对象类型 数组类型 异步类型 强制更新 对象和数据的强制更新 数组更新 以下支持自动更新 push() //向后添加 pop() //删除最后一个 shift() //删除第一个 unshift() //向第一个添加元素 splice() //向指定位置添加/删除元素 sort() //用原地算法对数组的元素进行排序 reverse() //将数组中元素的位置颠倒 注意,这种形式修改数据 this.arr[1] = ‘x’

  • Vue发送Formdata数据及NodeJS接收方式

    Vue发送Formdata数据及NodeJS接收方式

    目录 Vue发送Formdata数据 NodeJS后台接收 查看FormData里的值 Vue发送Formdata数据 参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的. 具体使用方法,参考此链接地址 // 这里我使用的是cropperjs插件,裁剪图片成功执行此方法 crop(blob) { const formData = new FormData(); let uid = this.$store.getter

  • Vue对象赋值视图不更新问题及解决方法

    当我们需要对vue里面data数据做动态更新. 如下,实例化了Vue对象,其下vueData为data属性指向,现在我们需要由后台装载完整的data对象 现在我们需要装载更新完整的data对象,常规的赋值方式并不会引起视图的更新,双向绑定会失效. 如上图中默认broker_list为空对象,装载完之后broker_list 包含新项(ZY98) 解决办法: $.each(clientData, function (k, v) { Vue.set(vueData,k,Object.assign({

  • android中强制更新app实例代码

    android中强制更新app实例代码

    推荐第三种方式,简单快捷不卡. 第一种:jjdxm_update GitHub地址:jjdxmashl/jjdxm_update 效果图: 点击立即更新,程序会在后台下载,通知栏有下载进度.这个时候手机系统很卡,可能由于是下载app的原因吧.下载完成后弹出安装界面 简介: 这是大神jjdxmashl的开源项目,下载地址见上方.有版本更新.手动更新.静默更新.自动更新4种情况.应用内更新,实现类是友盟自动更新sdk的模式,用户使用前只需要配置自己的服务器更新检查接口即可(必须接口),也可以扩展加入

  • VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析

    本文实例讲述了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法.分享给大家供大家参考,具体如下: 业务场景 我们在使用vue 编写 代码时,我们有一个 多行文本框控件,希望在页面点击一个按钮 在 文本框焦点位置插入一个 {pk}的数据. 发现插入 这个数据后,这个数据并没有同步到 数据中,但是直接通过键盘输入,就可以改变数据. 原因分析 在通过 JS 修改控件的value 数据后,并没有触发到数据更新. 解决办法 Vue.component('rx-textarea', {

  • 基于Vue实例对象的数据选项

    基于Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data data是Vue实例的数据对象.Vue将会递归将data的属性转换为getter/setter,从而让data属性能响应数据变化 [注意]不应该对data属性使用箭头函数 <div id="app"> {{ message }} </div> <script&

  • Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta

  • 解决vue中对象属性改变视图不更新的问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? 实例代码如下: let vm = new Vue{ el: '#app', data: { obj: { k: 'v' } }, ... } 有三种解决方案: 方案一:利用Vue.set(object,key,val) 例:Vue.set(vm.obj,'k1','v1') 方案二:利用this.$set(this.obj,key,val) 例:this.$se

随机推荐