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 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
微信小程序登录session的使用
Mar 17 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
PowerBI和Python关于数据分析的对比
2019/07/11 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python xlwt模块使用代码实例
2020/06/10 Python
pytorch SENet实现案例
2020/06/24 Python
法学专业个人求职信
2013/09/26 职场文书
大学班级文化建设方案
2014/05/06 职场文书
维修工先进事迹
2014/05/29 职场文书
2014年协会工作总结
2014/11/22 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
详解python字符串驻留技术
2021/05/21 Python
对讲机知识
2022/04/07 无线电