HarmonyOS @Watch回调方法没有改变

监听数组里的变化，参考示例如下，需要下载一个三方库 ：

ohpm install class-transformer
1.

import { plainToClass, ClassConstructor } from "class-transformer"
import { BusinessError, request } from '@kit.BasicServicesKit';

@Observed
class ProductModel {
  name: string = ''
  count: number = 0;
}

@Entry
@Component
struct ProductListView {
  //todo 1 父组件同步子组件needFreshCount值变化，在监听事件中增加业务逻辑处理
  @State @Watch('productListChanged') needFreshCount: number = 0;
  @State needFreshCount2: number = 0;
  jsonString: string = '[{"name":"商品1", "count":"1"},{"name":"商品2", "count":"1"},{"name":"商品3", "count":"1"}]'
  @State productList: ProductModel[] = [];

  productListChanged() {
    this.needFreshCount2++;
    console.log('needFreshCount2' + `${this.needFreshCount2}`)
  }

  aboutToAppear(): void {
    this.productList = jsonToArray(ProductModel, this.jsonString);
  }

  build() {
    Column({ space: 10 }) {
      Text('父组件这里没有刷新/或只刷新一次__' + `${this.needFreshCount2}`)
      ForEach(this.productList, (item: ProductModel, index: number) => {
        Column() {
          //todo 2 Watch监听不到数组中对象属性值变化，needFreshCount
          ProductView({
            item: item,
            needFreshCount: this.needFreshCount,
            countChanged: (product) => {
              //productList数组中嵌套对象item的属性值发生变化，监听不到数组的变化，无法触发productListChanged()这个监听方法
              // 这里即使把下面这行代码注释打开，给数组重新赋值，productListChanged()方法也只调用一次，并且影响子组件都只能更新一次了
              // this.productList[index] = product;
              // 上面的那种元素赋值不行，下面的这种整个数组赋值也依然不行
              // let temp = this.productList;
              // temp[index] = product;
              // this.productList = temp;
            }
          })
          Child2({ needFreshCount: this.needFreshCount, productList: this.productList })
            .margin({ top: 50 });


        }
      })
    }
  }
}

@Component
struct ProductView {
  @ObjectLink @Watch('productChanged') item: ProductModel;
  @Link needFreshCount: number;

  productChanged() {
    //todo 3 监听productList 数组中某个对象属性值发生变化，与父组件绑定一个变量needFreshCount，在父组件中监听needFreshCount变化
    this.needFreshCount++;
    console.log('ProductView' + `${this.needFreshCount}`)
  }

  countChanged: (item: ProductModel) => void = () => {
  };

  build() {
    Row() {
      Text(this.item.name)
      Text(`${this.item.count}`)
      Button('数量-1').onClick(() => {
        this.item.count--
        if (this.countChanged !== undefined) {
          this.countChanged(this.item);
        }
      })
      Button('数量+1').onClick(() => {
        this.item.count++
        if (this.countChanged !== undefined) {
          this.countChanged(this.item);
        }
      })
    }.width('100%').justifyContent(FlexAlign.SpaceBetween)
  }
}

@Component
struct Child2 {
  @Link @Watch('productChanged') needFreshCount: number;
  @State childNeedFreshCount: number = 0;
  @Prop productList: ProductModel[];

  productChanged() { //todo 4 监听 needFreshCount，同步父组件变化
    this.childNeedFreshCount++;
    console.log('child2' + `${this.childNeedFreshCount}`)
  }

  build() {
    Column() {
      Text('第二个子组件,要监听父组件productList数组的变化')
      Text('子组件这里也没有刷新/或只刷新一次__' + `${this.childNeedFreshCount}`)
    }
  }
}

function jsonToArray<T>(cls: ClassConstructor<T>, jsonStr: string): Array<T> {
  try {
    return plainToClass(cls, JSON.parse(jsonStr),
      { enableImplicitConversion: false, exposeDefaultValues: true }) as Array<T>
  } catch (err) {
    let error = err as BusinessError;
    return []
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.