前言
本文基于Api13
之前自己封装了一个列表刷新库，已经运行了很长的时间了，可是在最近接到一个问题，说是在给列表某条数据更新的时候，发现数据没有变化，接到问题的时候就马上进入了排查，最后发现是使用上没有按照规范执行，此问题的产生就是开发中常见的对象数组更新问题，索性就简单的记录一下。
我们知道，针对一个基本类型的数组，我们可以直接进行更改，就可以影响到数据的变化，如下面的案例，一个简单的数组加载，使用的是@State装饰器，在点击按钮之后，可以发现数组中索引为0的数据就发生了变化。
@Entry @Component struct Index { @State items: string[] = ["条目一","条目二","条目三"] build() { Column() { ForEach(this.items, (item: string) => { Text(item) .height(30) }) Button("修改数据") .onClick(() => { this.items[0] = "这是条目一修改后的数据" }) }.width("100%") .alignItems(HorizontalAlign.Center) } }
还是上面的案例，我们把基本类型数组改为一个对象数组，如下代码所示，就可以发现，点击按钮之后，数据没有发生变化。
class TestBean { name?: string constructor(name: string) { this.name = name } } @Entry @Component struct Index { @State items: TestBean[] = [ new TestBean("条目一"), new TestBean("条目二"), new TestBean("条目三")] build() { Column() { ForEach(this.items, (item: TestBean) => { Text(item.name) .height(30) }) Button("修改数据") .onClick(() => { this.items[0].name = "这是条目一修改后的数据" }) }.width("100%") .alignItems(HorizontalAlign.Center) } }
对象形式是开发中最为常见的方式，而对数据的更新也是司空见惯，比如条目中的选中状态，虽然以上的代码没有使用到List等列表组件，但是大同小异，都存在一个典型的问题，那就是，为什么基本数组可以更新，而对象数组不能更新呢？
这是因为@State装饰器，只能观察到第一层的变化，而第二层的属性变化是无法观察到的，如果要进行对象更新，需要使用到@Observed/@ObjectLink装饰器。
如果我不使用@Observed/@ObjectLink装饰器，难道就无法更新吗？这里做一下反问，后面我们注重概述一下，我们还是先按照传统的方式，使用装饰器，看如何更新对象数组。
@Observed/@ObjectLink使用
第一步，给对象加上@Observed装饰器
@Observed class TestBean { name?: string constructor(name: string) { this.name = name } }
第二步，视图抽取子组件
@Component struct TextView { @ObjectLink item: TestBean build() { Text(this.item.name) .height(30) } }
第三步，改为子组件
@Entry @Component struct Index { @State items: TestBean[] = [ new TestBean("条目一"), new TestBean("条目二"), new TestBean("条目三")] build() { Column() { ForEach(this.items, (item: TestBean) => { TextView({ item: item }) }) Button("修改数据") .onClick(() => { this.items[0].name = "这是条目一修改后的数据" }) }.width("100%") .alignItems(HorizontalAlign.Center) } }
经过以上的步骤，我们再次点击下按钮，可以发现，对象数组中的数据已经发生了变化：
@Observed/@ObjectLink配套使用，主要是用于嵌套场景的观察，是为了弥补装饰器仅能观察一层的能力限制，但是我们可以发现为了实现对象数据的更新，我们需要拆出子组件，需要做对象观察，我就一个简单的组件，不想这么麻烦，能否进行对象数据更新呢？显然是可以的。
数组更新
1、整个对象赋值
对于一个简单元素的对象，我们可以拿到数组，针对对应的索引直接更新即可，代码如下：让新的对象赋值给指定的索引。
class TestBean { name?: string constructor(name: string) { this.name = name } } @Entry @Component struct Index { @State items: TestBean[] = [ new TestBean("条目一"), new TestBean("条目二"), new TestBean("条目三")] build() { Column() { ForEach(this.items, (item: TestBean) => { Text(item.name) .height(30) }) Button("修改数据") .onClick(() => { this.items[0] = new TestBean("这是条目一修改后的数据") }) }.width("100%") .alignItems(HorizontalAlign.Center) } }
我们运行之后，可以发现数据也发生了变化，此方法更新的优点也显而易见，时间复杂度低（O(1)），代码简洁直观，更加符合我们的常规思想，缺点也很明显，如果对象元素比较多，管理稍显麻烦，毕竟是针对整个对象更新，而不是对象的单个元素。
2、单属性赋值
在第一种方式中，虽然实现了对象数组的数据更新，但是针对的是整个对象，而不是单个对象的某个属性，这对于针对单属性更新的场景非常的不便，有的同学们可能想到了，我们可以先获取某个索引的对象，修改完某个属性之后，再次赋值不就行了吗？哎，听起来好像没问题，我们验证一下：
let bean = this.items[0] bean.name = "这是条目一修改后的数据" this.items[0] = bean
以上的代码，我们运行之后，可以发现，并没有生效，因为对象还是原来的对象，其引用地址并未发生变化，为了使其更新，我们可以执行先删除后添加的方式，也就是先把这个位置的数据删除，在同样的位置再插入一条数据，这就实现了数据的动态变化，其实在数组中，已经为我们提供了一个方法，那就是splice方法。
splice方法是数组对象的一个内置函数，主要用于修改数组的内容，它可以实现，插入元素：可以在指定位置插入一个或多个元素到数组中；也可以进行删除元素：可以删除指定位置的一个或多个元素；也可以替换元素：可以删除指定位置的元素，并插入一个或多个新元素。
splice(start: number, deleteCount: number, items: T[]): T[];
start：表示要修改的起始索引位置（从0计数）。
deleteCount：表示要删除的元素数量，如果为0，则不删除任何元素。
...items: T[]：要插入到数组的元素。
我们使用splice方法对以上的代码做下优化，还是上面的案例，我们对元素为0的数据进行更新：
let bean = this.items[0] bean.name = "这是条目一修改后的数据" this.items.splice(0, 1, bean)
运行之后，可以发现，对象数组中的数据已经发生了变化。
相关总结
关于对象数组中的数据更新，目前例举了三种方式，一种是传统的装饰器方式，另外两种是针对数据源进行操作，数据源直接赋值的方式，适合简单、高频的单元素修改，性能最优且类型安全，而splice方法适合复杂操作或需保持引用稳定的场景，但需注意性能损耗，在实际的开发中可以根据需求，选择自己适合的方式。
