《Web 到 HarmonyOS》-- 第一课：前端经验哪些能带走如果你已经会 Vue3 + TS，转鸿蒙并不算「从零学

如果你已经会 Vue3 + TS，转鸿蒙并不算「从零学一门语言」，更像是： 换一套运行时、换一套声明式 UI DSL、补上原生应用的生命周期与工程约束。 本文先对齐两边「哪些经验能直接带走，哪些习惯必须改掉」，方便后面按专题深入。

一、先对齐概念：两边各自在解决什么

维度	Vue3 + TS（Web）	鸿蒙（ArkTS + ArkUI）
运行环境	浏览器 / Node	系统 Ability + ArkUI 引擎
UI 描述	模板 / JSX + Composition API	`build()` 里的声明式组件链
语言	TypeScript	ArkTS（TS 的严格子集 + 鸿蒙扩展）
状态驱动 UI	`ref` / `reactive`	`@State` / `@Prop` / `@Link` 等
工程产物	静态资源 + JS Bundle	HAP 安装包，跑在设备上

共同底色都是：用类型约束业务数据，用响应式状态驱动界面更新。
差异在于：Web 是「页面在浏览器里」，鸿蒙是「Ability 承载窗口，再加载页面」。

二、共同之处（前端经验几乎能直接复用）

1. TypeScript 心智模型仍然成立

接口、类型、泛型、async/await、模块 import/export 都还在
业务层（登录参数、列表模型、API 结果）仍然可以「先建模，再写 UI」

鸿蒙更倾向 class + @Observed，而不是纯 interface 对象，但「用类型描述业务」这一点没变。示例（登录模型）：

@Observed
export class loginpayloadType {
  loginName: string
  password: string

  constructor(loginName: string, password: string) {
    this.loginName = loginName
    this.password = password
  }
}

2. 组件化 + 状态驱动 UI

Vue 里：

const form = reactive({ loginName: '', password: '' })
const isLoading = ref(false)

鸿蒙里：

@State formData: loginpayloadType = new loginpayloadType(...)
@State isLoading: boolean = false

改状态 → 界面重绘，逻辑同构。登录、Toast、loading 切换，和 Vue 写表单提交几乎同一套路。

3. 声明式布局思路接近

Vue / CSS	ArkUI
`flex` + `flex-direction: column`	`Column()`
`flex-direction: row`	`Row()`
`gap` / `margin` / `padding`	`.margin()` / `.padding()` 链式调用
条件渲染 `v-if`	`if` 写在 `build()` 里
列表 `v-for`	`ForEach` / `LazyForEach`

本质不是「会不会写 UI」，而是「API 叫什么名字」。

4. 工程化习惯可迁移

页面 / 组件 / model / 常量分层
资源与文案外置（Vue 的 i18n / 主题 ↔ 鸿蒙 $r('app.string.xxx')、$r('app.color.xxx')）
包管理与构建（npm ↔ ohpm；Vite ↔ hvigor）

「别写死文案和色值」在两边都是同一规范。

5. 异步与网络思维一致

Promise、请求封装、错误处理、loading 态，业务骨架可以直接搬。
差别主要在：用哪套 HTTP / 存储 / 权限 API，以及是否要走系统能力。

三、异处（转岗真正要「换脑子」的地方）

1. 语言：ArkTS 比「随便写的 TS」更严

ArkTS 是 TypeScript 的严格子集，常见坑：

少用/禁用部分动态特性（过于宽松的 any、随意改对象结构等）
对象字面量、联合类型、装饰器等有约束
UI 相关类型更偏「结构化、可静态分析」

前端习惯「先跑通再补类型」，在鸿蒙里更容易被编译器拦住。
正确姿势：一开始就按严格类型写。

2. UI 写法：从「模板」变成「链式声明式 DSL」

Vue：

<template>
  <div class="col">
    <h1>{{ title }}</h1>
    <button @click="login">登录</button>
  </div>
</template>

鸿蒙：

build() {
  Column() {
    Text($r('app.string.login_title'))
    Button().onClick(() => this.handleLogin())
  }
}

没有 HTML/CSS 文件；样式是组件上的链式修饰符。这更接近 SwiftUI / Compose，而不是 Vue SFC。

3. 状态装饰器体系 ≠ Pinia / Composition API

Vue	鸿蒙 ArkUI
`ref` / `reactive`	`@State`
`props`	`@Prop` / `@Param`（版本有演进）
`v-model` / 双向	`@Link` / `@ObjectLink` 等
provide/inject	`@Provide` / `@Consume`
Pinia 全局 store	AppStorage / LocalStorage / 自定义单例等

概念能对上，但装饰器语义和生命周期绑定更强；嵌套对象还常要配合 @Observed，不能像 Vue 那样对任意 POJO 无脑 reactive。

4. 应用生命周期：从「页面」升级到「Ability」

Web 大致是：打开 URL → 挂载根组件 → 路由切换。鸿蒙还有一层系统级入口（EntryAbility）：

onCreate / onDestroy
onWindowStageCreate（加载首页内容）
onForeground / onBackground

这对应的是 App 前后台、窗口创建销毁，不是 onMounted。
前端转过来最容易漏的是：权限、后台、窗口、配置变更（深色模式、分屏）都要按 Ability 体系处理。

5. 路由与导航不同

Vue：vue-router（路径字符串、守卫、懒加载）
鸿蒙：页面配置（如 main_pages.json）+ router / Navigation + NavPathStack

常见结构是 Tabs + 每个 Tab 各自导航栈，这是典型的原生多栈导航，比 Web 单页路由更接近 App 信息架构。

6. 样式与资源体系不同

Vue：CSS / SCSS / UnoCSS，类名驱动
鸿蒙：资源目录 resources/base|dark/...，运行时 $r / $rawfile

主题、多分辨率、深色模式更偏原生资源限定词，而不是再挂一套 CSS 变量那么随意。

7. 运行与调试心智不同

	前端	鸿蒙
热更新	Vite HMR 极快	预览器 / 真机安装，节奏更像原生
DOM	有，可随便查	无 DOM，看组件树与系统日志
分发	部署到服务器	签名、打包 HAP、应用市场/企业内部分发
能力边界	受浏览器沙箱限制	受系统权限与 Kit API 限制

会少很多「改 CSS 立刻看效果」的爽感，但会多「调用系统能力」的深度。

8. 生态与「轮子」不同

Vue 生态：Element Plus、Axios、ECharts、大量 npm 包
鸿蒙：官方 Kit（ArkUI、Network、Ability…）+ ohpm 生态

很多 Web 组件库不能直接搬；列表、弹窗、图表往往要换鸿蒙侧方案。
业务抽象（DTO、校验、状态机）反而最容易跨端复用。

四、日常开发映射表

你在 Vue3 里做的事	到鸿蒙后怎么做
`.vue` SFC	`@Component` + `build()` 的 `.ets`
`ref` / `reactive`	`@State` 等装饰器
`props` / `emit`	`@Prop` + 回调参数 / 事件方法
`router.push`	`router` / `NavPathStack.pushPath`
Pinia	AppStorage / 自定义状态层
`axios`	`@kit.NetworkKit` 等
`localStorage`	Preferences / 分布式数据等
`el-message`	`promptAction.showToast`
`v-for`	`ForEach`
CSS 变量 / 主题	`color.json` + `$r` + dark 资源
`main.ts` 挂载 App	`EntryAbility` → `loadContent`

五、建议学习顺序

先写通一个登录页：@State、表单、Toast、资源引用——立刻感到「还是前端」
搞懂 Ability + 页面配置：应用如何冷启动到第一个页面
吃透布局与列表：Column/Row/Flex、List / LazyForEach
学 Navigation 多栈：Tab + 子页面栈
再碰系统能力：网络、存储、权限——按业务需要加
收紧 ArkTS 规范：把「能跑的 TS」改成「能过鸿蒙编译器的 ArkTS」

六、本篇结论

共同之处：组件化、类型化、响应式、异步业务、工程分层——Vue3 + TS 的核心能力可以带走大半。异处：ArkTS 更严格、UI 是声明式链式 DSL、生命周期在 Ability、路由是原生导航、资源与权限是系统级、生态与调试是 App 范式。

一句话：

转鸿蒙不是丢掉前端，而是把「浏览器里的 SPA」升级成「系统上的原生应用」；最值钱的不是 CSS 细节，而是状态建模、组件边界、异步与工程规范。