Sail的架构笔记

Appearance

1. 组件结构对比 ​

Vue 3:

vue
<script setup>
import { ref } from 'vue';
const message = ref('Hello');
</script>

<template>
  <div @click="message = 'World'">
    <Text>{{ message }}</Text>
  </div>
</template>

ArkUI (ArkTS):

typescript
@Entry
@Component
struct MyComponent {
  // 1. 响应式状态 (类似 ref)
  @State message: string = 'Hello';

  // 2. 构建 UI (类似 template，但直接写在 build 函数里)
  build() {
    Column() { // 类似 div
      Text(this.message)
        .fontSize(20)
        .onClick(() => {
          this.message = 'World'; // 直接修改，自动驱动视图更新
        })
    }
  }
}

2. 状态管理映射表 (背下这个表，你就通了 80%) ​

Vue 概念鸿蒙 ArkUI 装饰器说明
ref / data@State组件内私有状态，修改会触发 build() 刷新。
props (单向)@Prop父组件传给子组件，子组件修改不会同步回父组件。
v-model / emit@Link父子双向绑定。子组件改动，父组件状态同步变。
provide / inject@Provide / @Consume跨层级组件通信（爷孙通信）。
watch@Watch监听数据变化执行逻辑。
computed直接写 get 方法计算属性直接用 getter 实现。

3. 渲染控制映射 ​

  • v-if: ArkTS 中直接使用 if-else 语句控制渲染。
  • v-for: ArkTS 中使用 ForEach 或 LazyForEach（虚拟列表，性能优化版）。

第三阶段：Java 到鸿蒙系统能力的映射 (耗时：1天) ​

这里是 Vue 前端不涉及，但 Java 程序员非常擅长的领域：应用生命周期与并发。

1. 核心概念：Ability (UIAbility) ​

你可以把它理解为 Android 的 Activity，或者 Spring Boot 的一个 Controller 入口。

  • onCreate: 应用启动。
  • onDestroy: 应用销毁。
  • onWindowStageCreate: 窗口建立（UI 准备好了，加载页面）。

2. 最大的坑：并发模型 (Actor Model) ​

这是 Java 程序员最容易翻车的地方。

  • Java: 共享内存并发。你定义一个 static 变量，开个 new Thread 就能改。
  • 鸿蒙 (ArkTS): 内存隔离模型。主线程（UI线程）和 Worker 线程之间内存不共享！
    • 你不能直接在子线程修改 UI 绑定的 @State 变量。
    • 解决方案： 使用 TaskPool (推荐) 或 Worker。必须通过消息传递（序列化/反序列化）来交换数据。这有点像后端微服务之间的通信，而不是 Java 的多线程。

第四阶段：实战路径建议 ​

不要去看几百页的 API 文档，直接按这个顺序写 Demo：

  1. Day 1 上午： 下载 DevEco Studio，跑通 "Hello World"。熟悉工程目录结构（entry/src/main/ets 类似于 Java 的 src/main/java）。
  2. Day 1 下午： 写一个“计数器”页面。练习 @State, Column, Row, Button。体验一下类似 CSS 的链式调用属性（.width('100%').height(50)）。
  3. Day 2： 写一个“待办事项列表 (TodoList)”。
    • 用到 ForEach 渲染列表。
    • 拆分组件：父组件传 List 给子组件（@Prop），子组件点击完成通知父组件（@Link 或回调）。
    • 这步做完，你的 Vue 经验就完全转化过来了。
  4. Day 3： 网络与数据。
    • 封装一个 HttpUtils（类似 Java 的 OkHttp 或 Vue 的 Axios）。
    • 调用 API 获取数据，并在 UI 上展示。
    • 使用 Preferences (类似 Android SharedPreferences) 存一下用户设置。

给高级程序员的特别避坑指南 ​

  1. 别找 XML/HTML： 鸿蒙 Next 彻底抛弃了 Java/XML 写法，也抛弃了 HTML/CSS。UI 也是代码（ArkTS），这是趋势（Flutter, SwiftUI, Compose 都是这样）。
  2. 链式调用的顺序： 样式属性的顺序有时候会影响布局（类似 CSS 的盒模型），注意布局容器 Column/Row/Stack/Flex 的特性。
  3. 真机调试： 鸿蒙模拟器很吃内存（和你跑 Android 模拟器一样），有条件尽量用真机或者远程真机。
  4. 生态库： 鸿蒙的 Maven 仓库叫 Ohpm (Open Harmony Package Manager)。去 ohpm.openharmony.cn 找第三方库（比如 axios, zxing 等都有鸿蒙版）。

总结 ​

你有 Java 的底子，后端逻辑和类型系统难不倒你；你有 Vue 的底子，UI 构建和状态管理你会觉得无比亲切。