Vue不能检测到Object/Array更新的情况的解决
2018-06-26 11:00
896 查看
前言
看文档不认真,开发也没有多注意,总是hack。忽悠忽悠就过去,但怎么说,歪门邪道还是不太好,现在就亡羊补牢,总结总结。
数组
索引
- 使用下标更新数组元素;
- 使用赋值方式改变数组长度;
- 使用下标增删数组元素;
正文
使用下标更新数组元素
data: { arrs: [0, 1, 2, 3] }
直接使用
this.arrs[0] = 'zero';虽然数组确实是被更新了,但是更新不会被渲染到视图(html页面)上。因为Vue没有检测到数组的更新。
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
官方应对方法:
1、Vue.set( target, key, value )
Vue.set(this.arrs, 0, 'zero');
2.vm.items.splice(indexOfItem, 1, newValue)
this.arrs.splice(0, 1, 'zero');
使用赋值方式改变数组长度
即this.arrs.length = 100;无效!
官方应对方法:
1、vm.items.splice(newLength)
this.arrs.splice(100);
使用下标增删数组元素
即一下操作无效:
this.arrs[this.arrs.length] = this.arrs.length;
官方应对方法:变异方法。
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
this.arrs.push(this.arrs.length);
8、替换数组(改变引用)
如官方所言:filter(), concat() 和 slice()都是会返回一个新数组
this.arrs = this.arrs.contact(this.arrs.length); // or // this.arrs = this.arrs.contact([this.arrs.length]);
官方对性能问题的回应:
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
对象
索引
增删元素;
正文
data: { foo: { name: 'isaac' } }
增删元素
this.foo.job = 'coder'; delete this.foo.name;
如上增删元素是无效的。
官方的解决方法:
// 新增 Vue.set(this.foo, 'job', 'coder'); // 删除 Vue.delete(this.foo, 'name');
Vue.delete对数组也是有效传送门
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 解决vue中修改了数据但视图无法更新的情况
- ObjectContext的ApplyPropertyChanges()方法不能更新导航属性的解决办法
- Vue不能检测数组或对象变动问题的解决
- VUE中解决不能检测数组中基本数据类型的方法及$set的使用方法
- 解决Vue不能检测数组或对象变动的问题
- vue 数组和对象不能直接赋值情况和解决方法
- vue 数组和对象不能直接赋值情况和解决方法(推荐)
- json有两种类型,jsonObject(即jsonNode)和jsonArray,jsonArray怎么遍历?为什么不能将jsonArray转换为list?
- 【教你解决XP系统不能自动更新问题】
- 安装office2007之windows installer 服务不能更新一个或多个受保护的windows文件问题解决
- 彻底解决Windowless=true情况下TextBox不能输入的问题
- 解决Android Studio引入SVN上Eclipse依赖工程不能实时更新的思考
- IIS7.0 部署异常 【不能在此路径中使用此配置节。如果在父级别上锁定了该节,便会出现这种情况】解决方法
- 解决svn的working copy locked并且cleanup恢复不能的情况
- vue中修改了数据但视图无法更新的情况[转载]
- Eclipse3.0不能检测已安装插件的解决方法
- 解决vue中虚拟dom,无法实时更新的问题
- 形如 JSONObject["xx"] is not a JSONArray的解决办法
- 解决Android SDK Manager不能更新的问题
- SVN Access to ‘/xxx/’ forbidden,不能更新提交的解决办法