HarmonyOS Next V2 @Local 和@Param

@Local 背景

@Local 是harmony應用開發中的 v2 版本中對標**@State**的狀態管理修飾器，它解決了 @State 對狀態變量更改的檢測混亂的問題：

@State 修飾的狀態變量可以是組件內部自己定義的
@State 修飾的狀態也可以由外部父組件傳遞

這樣就導致了狀態數據來源不唯一，在大型項目中會引發難易檢測和維護狀態的問題。如以下代碼：

@Entry
@Component
struct Index {
  @State num: number = 100

  build() {
    Column() {
      Text("父組件的數據 " + this.num)

      Son({ num: this.num })
      Son()
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct Son {
  @State num: number = 0

  build() {
    Column() {
      Button(`子組件 ${this.num}`)
        .onClick(() = > {
          this.num++
        })
    }
  }
}

@Local 基本使用

@Local的出現就是為了解決這一類問題

@Local 只能用在 @Componentv2 修飾的組件上
被**@Local**裝飾的變量無法從外部初始化(無法由父組件傳遞進來)，因此必須在組件內部進行初始化

我們對上面代碼稍作修改

@Entry
@Component
struct Index {
  @State num: number = 100

  build() {
    Column() {
      Text("父組件的數據 " + this.num)

      Son({ num: this.num }) // 這里就報錯啦

      Son()
    }
    .height('100%')
    .width('100%')
  }
}

@ComponentV2 // 此處調整為 @ComponentV2
struct Son {

  // 此處調整為 @Local
  @Local num: number = 0

  build() {
    Column() {
      Button(`子組件 ${this.num}`)
        .onClick(() = > {
          this.num++
        })
    }
  }
}

@Local 與@State 對比

	@State	@Local
參數	無。	無。
從父組件初始化	可選。	不允許外部初始化。
觀察能力	能觀測變量本身以及一層的成員屬性，無法深度觀測。	能觀測變量本身，深度觀測依賴@Trace 裝飾器。
數據傳遞	可以作為數據源和子組件中狀態變量同步。	可以作為數據源和子組件中狀態變量同步。

@Local 特別注意

@Local 支持觀測 number、boolean、string、Object、class 等基本類型以及 Array、Set、Map、Date 等內嵌類型。
@Local 的觀測能力僅限于被裝飾的 變量本身 。當裝飾簡單類型時，能夠觀測到對變量的賦值；當裝飾對象類型時，僅能觀測到對對象整體的賦值；當裝飾數組類型時，能觀測到數組整體以及數組元素項的變化；當裝飾 Array、Set、Map、Date 等內嵌類型時，可以觀測到通過 API 調用帶來的變化。

@Params

@Params主要表示子組件接收父組件傳遞的數據。可以和 @Local 搭配一起使用

@Params 背景

在 V1 版本的狀態管理修飾符中，可以用來處理父子傳參的技術有：

普通屬性，不需要特別的修飾符，不具備單向同步
@Prop 單向同步，不能監聽深層次屬性的改變，也不能做到雙向同步
@Link 可以做到雙向同步，但是不能監聽深層次屬性的改變，而且不能直接用在列表渲染技術 - ForEach 中
@ObjectLink 可以做到雙向同步，但是必須和 @Observed 搭配使用，而且只能用在自定義組件上

1. 普通屬性

普通屬性，不需要特別的修飾符，不具備單向同步

@Entry
@Component
struct Index {
  @State num: number = 100

  build() {
    Column() {
      // 父組件傳遞過去的數據
      Son({ num: this.num })
        .onClick(() = > {
          this.num++
          console.log("", this.num)
        })
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct Son {
  num: number = 0

  build() {
    Column() {
      Button(`子組件 ${this.num}`)
    }
  }
}

2. @Prop 單向同步

@Prop 單向同步

不能監聽深層次屬性的改變
也不能做到雙向同步

在上面代碼基礎上加入**@Prop**，可以檢測到基本類型數據的更新

@Component
struct Son {
  @Prop num: number = 0

但是無法檢測深層次屬性的改變,如

class Animal {
  dog: Dog = {
    age: 100
  }
}

class Dog {
  age: number = 100
}

@Entry
@Component
struct Index {
  @State
  animal: Animal = new Animal()

  build() {
    Column() {
      // 父組件傳遞過去的數據
      Son({ dog: this.animal.dog })
        .onClick(() = > {
          this.animal.dog.age++
          console.log("", this.animal.dog.age)
        })
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct Son {
  @Prop dog: Dog

  build() {
    Column() {
      Button(`子組件 ${this.dog.age}`)
    }
  }
}

3. @Link 雙向同步

@Link 用法和@Prop 基本一致

可以做到雙向同步，但是

不能監聽深層次屬性的改變

而且不能直接用在列表渲染技術 - ForEach 中 以下代碼演示這個效果

class Dog {
  age: number = 100
}

@Entry
@Component
struct Index {
  @State
  dogList: Dog [] = [new Dog(), new Dog(), new Dog(), new Dog()]

  build() {
    Column() {
      ForEach(this.dogList, (item: Dog) = > {
        // 此處會報錯  Assigning the attribute 'item' to the '@Link' decorated attribute 'dog' is not allowed. < ArkTSCheck >
        Son({ dog: item })
          .onClick(() = > {
            item.age++
            console.log("", item.age)
          })
      })

    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct Son {
  @Link dog: Dog

  build() {
    Column() {
      Button(`子組件 ${this.dog.age}`)
    }
  }
}

4. @ObjectLink

@ObjectLink 可以做到雙向同步，但是必須和 @Observed 搭配使用，而且只能用在自定義組件上

小結

可以看到，如果都是使用 v1 版本的這一套父子傳參的技術，是十分復雜難易直接上手使用的。

@Params 介紹

Param 表示組件從外部傳入的狀態，使得父子組件之間的數據能夠進行同步：

@Param 裝飾的變量支持本地初始化，但是不允許在組件內部直接修改變量本身。
- 如果不本地初始化，那么必須加入 @Require
@Param 可以做到單向同步
@Param 可以檢測深層次屬性的修改，但是該修改在數據源上必須是整體對象的更新
@Params 如果也想要深度監聽單個屬性的修改，那么需要使用 @ObservedV2 和 @Trace

以下代碼主要演示：@Param 可以檢測深層次屬性的修改，但是該修改在數據源上必須是整體對象的更新

class Person {
  age: number = 100
}
@Entry
@ComponentV2
struct Index {
  @Local
  person: Person = new Person()
  build() {
    Column() {
      Son({ age: this.person.age })
        .onClick(() = > {
          this.person.age++
          console.log("", this.person.age)
          if (this.person.age === 105) {
            const p = new Person()
            p.age = 200
            // 整體更新，子組件可以感知到
            this.person = p
          }
        })
    }
    .height('100%')
    .width('100%')
  }
}

@ComponentV2
struct Son {
  // 要么設置 @Require 表示父組件必須傳遞數據
  // 要么設置 默認值
  @Require @Param age: number
  build() {
    Column() {
      Button(`子組件 ${this.age}`)
    }
  }
}