鸿蒙开发:V2版本装饰器@Once

简介: @Once装饰器只能与@Param搭配使用,仅此一个组合,无其他使用方式,还有就是,必须在V2版本,也就是@ComponentV2装饰的自定义组件中,否则会报异常。

前言


本文代码案例基于Api13。


最近准备把refresh刷新库的装饰器由V1升级至V2时,遇到了一个问题,在@Prop装饰器切换@Param装饰器时,发现了自定义组件的属性无法修改问题,提示报错:

Cannot assign to 'testContent' because it is a read-only property. <ArkTSCheck>

实际错误截图:


错误原因为,@Param装饰的变量仅支持本地初始化,不允许在组件内部直接修改变量本身。


虽然知道了原因,但是由于V1版本的逻辑,在自定义组件中除了来自于调用者的传递之外,而自身的属性也需要进行动态修改,否则改动量就很大,正要寻找他法进行实现时,@Once装饰器映入了眼帘。

什么是@Once装饰器


@Once装饰器作为辅助装饰器,本身没有对装饰类型的要求以及对变量的观察能力,但是它具有两个作用,第一个是解决@Param装饰器修饰后的属性不能修改问题,第二个就是,实现仅从外部初始化一次、不接受后续同步变化的能力,也就是当后续数据源更改时,不会将修改同步给子组件。


有一点需要注意,那就是@Once装饰器不能单独使用,必须搭配@Param使用,结合使用时,不会影响@Param的观测能力,仅针对数据源的变化做拦截,还有就是谁在前谁在后,这个都不会造成影响。

搭配使用时,前后位置都可以:

@Param @Once testContent: string = "测试数据一"
@Once @Param testContent2: string = "测试数据一"


使用场景


如果我们仅用 @Param装饰进行修饰,会发现,调用者只要数据有改变就会引起自定义组件数据变化,如果你想仅仅初始化进来数据同步一下,之后数据变化无须在同步,那么就可以使用@Once装饰器进行修饰,修饰后,无论怎么修改都不会引起数据变化。


@ComponentV2
struct RefreshLayout {
  @Param @Once testContent: string = "测试数据一"
  build() {
    Column() {
      Text(this.testContent)
    }
  }
}
@Entry
@ComponentV2
struct Index {
  @Local testContent: string = "Hello World"
  build() {
    Column() {
      RefreshLayout({ testContent: this.testContent })
      Button("点击改变")
        .margin({ top: 20 })
        .onClick(() => {
          this.testContent = "测试数据二"
        })
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

上面的情况是外部调用者进行更新,不想引起自定义组件发生数据改变,如果你想在自定义组件内部,使用@Param修饰后的属性,可以发生改变,且能更新UI,那么就可以使用@Once装饰器进行修饰。

@ComponentV2
struct RefreshLayout {
  @Param @Once testContent: string = "测试数据一"
  build() {
    Column() {
      Text(this.testContent)
      Button("点击改变")
        .margin({ top: 20 })
        .onClick(() => {
          this.testContent = "测试数据二"
        })
    }
  }
}
@Entry
@ComponentV2
struct Index {
  @Local testContent: string = "Hello World"
  build() {
    Column() {
      RefreshLayout({ testContent: this.testContent })
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}


相关总结


@Once装饰器只能与@Param搭配使用,仅此一个组合,无其他使用方式,还有就是,必须在V2版本,也就是@ComponentV2装饰的自定义组件中,否则会报异常。

以下和其他装饰器结合使用就是错误的案例:

@Local @Once testContent: string = "Hello World"


会报错异常:

'@Once' works only when used with '@Param' in pairs. <ArkTSCheck>


异常截图如下:

相关文章
|
8月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
4月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
494 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
4月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
450 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
7月前
|
安全 JavaScript API
鸿蒙开发核心要素
鸿蒙开发核心要素
|
4月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
883 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
8月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
288 0
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
8月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
|
4月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
244 0

热门文章

最新文章