ArkTS-@Observed装饰器和@ObjectLink装饰器

//允许@ObjectLink装饰的数据属性赋值
this.objLink.a=...
//不允许@ObjectLink装饰的数据自身赋值
this.objLink= ...

class ClassA{
    public c: number;
    constructor(c: number){
        this.c = c;
    }
}
@Observed
class ClassB{
    public a: ClassA;
    public b: number;
    
    constructor(a: ClassA, b: number){
        this.a = a;
        this.b = b;
    }
}

@ObjectLink b: ClassB

//赋值变化可以被观察到
this.b.a = new ClassA(5)
this.b.b = 5

//ClassA没有被@Observed装饰，其属性的变化观察不到
this.b.a.c = 5

//objectLinkNestedObjects.ets
let NextID: number = 1;

@Observed
class ClassA{
    public id: number;
    public c: number;
    
    constructor(c: number){
        this.id = NextID++;
        this.c = c;
    }
}

@Observed
class ClassB{
    public a: ClassA;
    
    constructor(a: ClassA){
        this.a = a;
    }
}

@Component
struct ViewA{
    label: string = 'ViewA1';
    @ObjectLink a: ClassA;
    
    build(){
        Row(){
            Button(`ViewA [${this.label}] this.a.c=${this.a.c}+1`)
            	.onClick(()=>{
                this.a.c +=1;
            })
        }
    }
}

@Entry
@Component
struct ViewB{
    @State b: ClassB = new ClassB(new ClassA(0));
    
    build(){
        Column(){
            ViewA({label: 'ViewA #1',a: this.b.a})
            ViewA({label: 'ViewA #2',a: this.b.a})
            Button(`ViewB: this.b.a.c+=1`)
            	.onClick(()=>{
                this.b.a.c +=1;
            })
            
            Button(`ViewB: this.b.a =new ClassA(0)`)
            	.onClick(()=>{
                this.b.a = new ClassA(0);
            })
            
            Button(`ViewB: this.b = new ClassB(ClassA(0))`)
            	.onClick(()=>{
                this.b = new ClassB(new ClassA(0));
            })
        }
    }
}

@Component
struct ViewA{
    //子组件ViewA的@ObjectLink的类型是ClassA
    @ObjectLink a: ClassA;
    label: string = 'ViewA1';
    
    build(){
        Row(){
            Button(`ViewA[${this.label}] this.a.c = ${this.a.c}+1`)
            	.onClick(()=>{
                this.a.c +=1;
                
            })
        }
    }
}

@Entry
@Component
struct ViewB{
    //ViewB中有@State装饰的ClassA[]
    @State arrA: ClassA[]  = [new ClassA(0), new ClassA(0)];
    
    build(){
        Column(){
            ForEach(this.arrA,
                   (item) =>{
                ViewA({label: `#${item.id}`,a:item})
            },
                   (item) =>item.id.toString())
            
            //使用@State装饰的数组的数组项初始化@ObjectLink，其中数组项是被@Observed装饰的ClassA的实例
            ViewA({label: `ViewA this.arrA[first]`,a: this.arrA[0]})
            ViewA({label: `ViewA this.arrA[last]`,a: this.arrA.length-1]})
            
            Button(`ViewB: reset array`)
            	.onClick(()=>{
                this.arrA = [new ClassA(0),new ClassA(0)];
            })
            
            Button(`ViewB: push`)
            	.onClick(()=>{
                this.arrA.push(new ClassA(0))
            })
            
            Button(`ViewB: shift`)
            	.onClick(()=>{
                this.arrA.shift()
            })
            
            Button(`ViewB: chg item property in middle`)
            	.onClick(()=>{
                this.arrA[Math.floor(this.arrA.length/2)].c = 10;
            })
            
            Button(`ViewB: chg item property in middle`)
            	.onClick(()=>{
                this.arrA[Math.floor(this.arrA.length/2)]=new ClassA(11);
            })
        }
    }
}

@Observed
class StringArray extends Array<String>{
    
}

@Observed
class StringArray extends Array<String>{
    
}
@Component
struct ItemPage{
    @ObjectLink itemArr: StringArray;
    
    build(){
        Row(){
            Text('ItemPage')
            	.width(100).height(100)
            
            ForEach(this.itemArr,
                   item =>{
                Text(item)
                	.width(100).height(100)
            },
                   item => item)
        }
    }
}

@Entry
@Componnet
struct IndexPage{
    @State arr: Array<StringArray> = [new StringArray(),new StringArray(),new StringArray()];
    
    build(){
        Column(){
            ItemPage({itemArr: this.arr[0]})
            ItemPage({itemArr: this.arr[1]})
            ItemPage({itemArr: this.arr[2]})
            
            Divider()
            
            ForEach(this.arr,
                   itemArr =>{
                ItemPage({itemArr:itemArr})
            },
                   itemArr=>itemArr[0])
            
            Divider()
            
            Button('update')
            	.onClick(()=>{
                console.error('Update all items in arr');
                if(this.arr[0][0]!== undefined){
                    //正常情况下需要有一个真实的ID来与ForEach一起使用，但此处没有
                    //因此需要确保推送的字符串是唯一的。
                    this.arr[0].push(`${this.arr[0].slice(-1).pop()}${this.arr[0].slice(-1).pop()}`);
                    this.arr[1].push(`${this.arr[1].slice(-1).pop()}${this.arr[1].slice(-1).pop()}`);
                    this.arr[2].push(`${this.arr[2].slice(-1).pop()}${this.arr[2].slice(-1).pop()}`);
                }else{
                    this.arr[0].push('Hello');
                    this.arr[1].push('World');
                    this.arr[2].push('!');
                }
            })
        }
    }
}