arkui语法

1. 普通变量

• 定义：普通变量是常规的局部或类成员变量，定义时不使用任何特殊装饰器。
• 特点：
  • 一次性渲染：普通变量只在初始化阶段参与渲染，即在页面或组件首次加载时，它们的值会影响 UI 的显示。
  • 不参与后续更新：一旦 UI 完成初次渲染，普通变量的修改不会触发 UI 的重新渲染。因此，它们在 UI 动态更新的场景下不生效。
  • 使用场景：适合用于不需要动态更新的场景，例如仅用于一次展示的静态数据或配置值。

示例：

let name = 'OpenHarmony';
// name 在初始化时会渲染到 UI，但后续修改它不会更新 UI

2. 状态变量

• 定义：状态变量通过特定的装饰器（如 @State 或 @Observed）修饰。它们的值变化时，UI 会自动刷新。
• 特点：
  • 自动渲染更新：当状态变量的值发生变化时，会触发整个 UI 的重新渲染，从而反映最新的状态。这种机制类似于其他前端框架中的响应式系统（例如 Vue 的 reactive 或 React 的 state）。
  • 持久化状态：状态变量可以用来存储 UI 的当前状态，确保组件在值更新时展示正确的内容。
  • 使用场景：常用于需要动态更新 UI 的场景，例如表单输入、按钮点击后状态的变化等。

示例：

@State name = 'OpenHarmony';
// 当 name 的值改变时，UI 将会重新渲染，展示最新的 name 值
name = 'HarmonyOS';

3. 其他装饰器

除了 @State，ArkUI 还支持其他与状态管理相关的装饰器，例如：

• @Prop：用于接收父组件传递的参数，类似于 Vue.js 中的 props，这些参数如果变化，也会触发子组件的重新渲染。
• @Observed：用于观察外部状态的变化，和 @State 类似，适用于全局或其他来源的状态变化。

总结：

• 普通变量：仅参与初始化渲染，后续修改不会触发 UI 更新。
• 状态变量：通过装饰器修饰，任何状态变化都会自动引发 UI 刷新，适合处理动态数据。