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

作者:issac_宝华 时间:2024-05-09 15:14:32 

前言

看文档不认真,开发也没有多注意,总是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对数组也是有效传送门

来源:https://www.jianshu.com/p/c6c00bb5de64

标签:Vue,更新数组,对象更新
0
投稿

猜你喜欢

  • Thinkphp5.1获取项目根目录以及子目录路径的方法实例讲解

    2023-11-20 00:55:58
  • 几个比较重要的MySQL变量

    2024-01-23 20:22:36
  • Vue2.0 axios前后端登陆拦截器(实例讲解)

    2023-07-02 16:59:11
  • python字典按照value排序方法

    2021-01-31 06:13:16
  • 比较详细的MySQL字段类型说明

    2024-01-20 16:13:02
  • 定时备份 Mysql并上传到七牛的方法

    2024-01-25 14:11:13
  • Python 中的 else详解

    2021-12-15 09:42:18
  • Python轻量级ORM框架Peewee访问sqlite数据库的方法详解

    2024-01-23 06:47:45
  • win10下mysql 8.0.12 安装及环境变量配置教程

    2024-01-19 22:34:17
  • Oracle8i和Microsoft SQL Server比较

    2010-07-26 13:05:00
  • pymssql数据库操作MSSQL2005实例分析

    2024-01-15 02:23:42
  • JavaScript数组方法-系统性总结详解

    2024-04-28 09:38:49
  • CSS兼容性(IE和Firefox)技巧大全

    2010-07-29 12:29:00
  • 关于Python中的编码规范

    2021-11-07 02:38:02
  • 关于js遍历表格的实例

    2024-04-18 09:29:21
  • SQL Server提示"选定的用户拥有对象,所以无法除去该用户”

    2024-01-22 03:35:05
  • mysql启动错误之mysql启动报1067错误解决方法

    2024-01-26 07:52:56
  • python3 tcp的粘包现象和解决办法解析

    2022-08-02 02:22:53
  • mvn 打包报错:no compiler is provided in this environment

    2023-10-31 00:47:17
  • 使用Python对MySQL数据操作

    2024-01-16 16:04:26
  • asp之家 网络编程 m.aspxhome.com