Vue不能检测到Object/Array更新的情况的解决
作者:issac_宝华 发布时间:2024-05-09 15:14:32
前言
看文档不认真,开发也没有多注意,总是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对数组也是有效传送门
来源:https://www.jianshu.com/p/c6c00bb5de64


猜你喜欢
- 前言在启动 Django 项目时,Django 默认监听的端口号为 8000,设置的默认 IP 地址为 127.0.0.1 。如果需要修改默
- 解决问题: 不使用for计算两组、多个矩形两两间的iou使用numpy广播的方法,在python程序中并不建议使用for语句,python中
- 目录信号:官方介绍:blinker 使用命名信号匿名信号组播信号接收方订阅主题装饰器用法可订阅主题的装饰器检查信号是否有接收者检查订阅者是否
- 数据库在高并发的场景下使用外键约束会有锁问题并且使用外键会增加运维成本,所以很多公司都规定生产环境的数据库禁止使用外键。那么不使用外键约束的
- Softmax原理Softmax函数用于将分类结果归一化,形成一个概率分布。作用类似于二分类中的Sigmoid函数。对于一个k维向量z,我们
- 1. 介绍灰度切割:增强特定范围的对比度,突出图像 * 定范围的亮度(灰度级分层也叫灰度切割)实现灰度切割的方法有很多种,但基本的方法就两种,
- 简介Python有广泛丰富的第三方库,在没有特殊定制下,避免了重复造轮子。若我们想获取随机时间,可以自己写一个,但也可以通过第三方库,如ra
- 数据表都已经创建起来了,假设我们已经插入了许多的数据,我们就可以用自己喜欢的方式对数据表里面的信息进行检索和显示了,比如说:可以象下面这样把
- 什么是爬虫爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源
- 说实话,第一次写这么长的Python代码,期间遇到了很多问题,但是,最终还是完成了,花了我一天半的时间。该程序实现了用户的增,删,改,查,主
- 准备工作1.安装scrapy_redis包,打开cmd工具,执行命令pip install scrapy_redis2.准备好一个没有BUG
- 这次让我们一个用 Python 做一个小工具:将动态 GIF 图片倒序播放!GIF(Graphics Interchange Format)
- 一:input()函数的输入机制我们编写的大部分程序,都需要读取输入并对其进行处理,而基本的输入操作是从键盘键入数据。Python从键盘键入
- 本文实例讲述了Python通用循环的构造方法。分享给大家供大家参考,具体如下:1.交互循环是无限循环的一种,允许用户通过交互的方式程序的特定
- python语言中的列表排序方法有3个:reverse反转/倒序排序sort正序排序sorted可以获取排序后的列表在更高级列表排序中,后两
- 一、准备训练数据主要的数据有两个:1.小黄鸡的聊天语料:噪声很大2.微博的标题和评论:质量相对较高二、数据的处理和保存由于数据中存到大量的噪
- 在Python2中datetime对象没有timestamp方法,不能很方便的生成epoch,现有方法没有处理很容易导致错误。关于Epoch
- 大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也不尽是如此,有时候也会碰到多页面的项
- 题目:解法一:比较元素是否相等思路说明:这种应该是普通人最先想到的解法,先获取到数组之后进行有小到大排序,然后初始化一个min=0(代表新数
- 这里是WMP的版本ClassID,从WMP7后ID就成了clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6