Vue不能检测到Object/Array更新的情况的解决


Posted in Javascript onJune 26, 2018

前言

看文档不认真,开发也没有多注意,总是hack。忽悠忽悠就过去,但怎么说,歪门邪道还是不太好,现在就亡羊补牢,总结总结。

数组

索引

  1. 使用下标更新数组元素;
  2. 使用赋值方式改变数组长度;
  3. 使用下标增删数组元素;

正文

使用下标更新数组元素

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)

Vue不能检测到Object/Array更新的情况的解决 

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;

官方应对方法:变异方法。

  1. push()
  2. pop()
  3. shift()
  4. unshift()
  5. splice()
  6. sort()
  7. 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对数组也是有效传送门

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript错误的认识不用关心内存管理
Dec 15 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
js+canvas实现五子棋小游戏
Aug 02 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 #Javascript
Vue动态控制input的disabled属性的方法
Jun 26 #Javascript
利用Decorator如何控制Koa路由详解
Jun 26 #Javascript
vue实现点击关注后及时更新列表功能
Jun 26 #Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 #Javascript
nuxt.js 缓存实践
Jun 25 #Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 #Javascript
You might like
php二分查找二种实现示例
2014/03/12 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
xmlHTTP实例
2006/10/24 Javascript
解决FLASH需要点击激活的代码
2006/12/20 Javascript
firefox中JS读取XML文件
2006/12/21 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
python爬虫 正则表达式解析
2019/09/28 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
党员自我批评与反省材料
2014/02/10 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
公司员工奖惩制度
2015/08/04 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL