说实话，从传统的 Web 前端开发转战鸿蒙开发，那种感觉就像是刚学会骑自行车，突然让你去开一辆 Formula 1 赛车。虽然dou是“轮子上的运动”，但底层逻辑和操作手感完全变了。Zui近不少小伙伴在后台疯狂私信，问得Zui多的一个问题就是：“在鸿蒙里父子组件到底怎么传值？为什么我照着 Vue 的写法写，页面就是不刷新？”

这确实是个让人头秃的问题。咱们今天不整那些虚头巴脑的理论，直接来点实战干货，聊聊鸿蒙 ArkTS 里的数据流转艺术。特别是那个让无数前端老手翻车的 @ObjectLink 和 @Observed，咱们得好好掰扯掰扯。

思维转换：告别 Vue 的“随意”，拥抱 ArkTS 的“严谨”

在 Vue 或者 React 里咱们习惯了把数据往组件里一扔，只要引用变了视图就跟着变。但在鸿蒙的世界里这招有时候不太灵。为什么？因为鸿蒙的渲染机制对性Neng的压榨到了极致，它要求你必须明确告诉系统：“嘿，这数据变了你要geng新视图！”

这就引出了咱们今天的主角——装饰器。Ru果你只是想Zuo个简单的展示，用 @Prop 也就罢了；但一旦涉及到复杂对象的修改，比如购物车里的商品数量变动、价格调整，那就必须得请出 @Observed 和 @ObjectLink 这对“黄金搭档”。

核心难点：深层嵌套对象的响应式噩梦

咱们先来kan个场景。假设你在Zuo一个电商页面父组件里有一堆商品数据，子组件负责渲染每一个商品卡片。在子组件里用户点击了“加入购物车”，商品的数量要加 1，总价要变。这时候，Ru果你直接修改对象属性，鸿蒙的 UI 可Neng会纹丝不动，仿佛在嘲笑你的无知。

这时候，@ObjectLink 就该登场了。它就像是子组件和父组件数据之间的一条“神经线”，一旦父组件里的数据对象发生任何风吹草动，子组件Neng立刻感知到。

第一步：先给数据类“上户口”——定义被观察类

别急着写组件，先kankan你的数据模型。在鸿蒙里想让一个类的属性变化被系统kan见，你得先给它贴个标签。这就是 @Observed 的作用。

咱们来定义一个商品类 ProductItem。注意kan下面的写法，这可是基础中的基础：

@Observed
class ProductItem {
  name: string;
  price: number;
  image: string
  constructor {
    this.name = name;
    this.price = price;
    this.image = image
  }
}

kan到了吗？@Observed 装饰在类上。这就好比给这个类办了一张“VIP 通行证”，以后这个类的实例属性一旦被修改，系统就会高kan一眼，知道这是需要触发 UI geng新的重要数据。要是没这个装饰器，你后面怎么折腾dou是白搭。

第二步：子组件如何“接收”数据——@ObjectLink 的奥义

接下来轮到子组件了。在子组件的 struct 里咱们得用 @ObjectLink 来接收父组件传过来的对象。

这里有个大坑，千万注意：子组件用 @ObjectLink product: ProductItem 接收。这行代码虽然短，但信息量巨大。

这意味着，子组件不仅拿到了数据，还建立了一个双向的、深度的观察关系。父组件传进来的是个引用，子组件通过 @ObjectLink 盯着这个引用。Ru果父组件把这个引用换成了另一个对象，子组件会刷新；Ru果父组件或者子组件修改了这个对象内部的属性，子组件也会刷新！

这和 Vue 的 ref 或者 reactive 有点像，但geng加强制和规范。它的作用非常明确：数据改变 → 页面自动刷新。这就是咱们梦寐以求的响应式体验，但在鸿蒙里你得按规矩来。

实战演练：父组件的“指挥艺术”

光说不练假把式。咱们来kankan父组件是怎么玩转这一切的。父组件不仅要创建数据，还得负责把数据分发下去，同时处理一些全局的状态，比如购物车的总数量。

在父组件里咱们通常会用 @State 来管理状态。比如咱们Ke以定义一个购物车的数量：

@State cartCount: number = 0

当然父组件还得负责创建那些商品实例。这里有个细节，父组件用 new ProductItem 创建实例。这行代码虽然简单，但它是整个数据流的源头。你创建的每一个实例，dou是被 @Observed 包裹着的，准备好随时响应变化了。

当你在父组件的 build 方法里遍历这些商品，传给子组件时鸿蒙的底层机制就开始工作了。它会自动把对象的引用传递过去，建立起那条kan不见的“神经线”。

关于函数传递的那些事儿

除了数据，咱们经常还得传方法。比如子组件里有个按钮“加入购物车”，点击后得告诉父组件：“嘿，给我加个数！”。

这时候，子组件通常会定义一个接收函数的属性：

onAddToCart:  => void

在父组件传参的时候，直接写函数名，不需要任何装饰器。这一点和 Vue 有点像，但又有点细微差别。在鸿蒙里传递函数引用相对简单粗暴，你只要把父组件的方法绑定过去就行了。但是要注意，Ru果你在子组件里调用这个函数，并且这个函数里修改了父组件的 @State 变量，那父组件的刷新是自动的，不需要你手动去干预。

那些年我们踩过的坑：关于 this 的血泪史

说到这里必须得提一个让无数开发者抓狂的细节。在 ArkTS 里写代码，尤其是涉及到类方法或者修改状态的时候，this 的指向问题简直是噩梦。

大家一定要记住：修改变量必须用 this.xxx，否则报错。

这可不是开玩笑的。在 JavaScript 里咱们有时候Ke以省略 this，或者依靠闭包去猜。但在 ArkTS 这种强类型、严谨的语法环境下它不跟你玩暧昧。你想修改 cartCount？你必须写 this.cartCount。你想调用 onAddToCart？你也得kan清楚 this 到底指向谁。

hen多从 Vue 转过来的同学，习惯了 data 直接返回对象，或者解构赋值。到了鸿蒙，千万别这么干。一旦你把 this 弄丢了或者试图直接修改一个解构出来的变量，你会发现代码编译通过了但运行起来就像个死尸，一动不动。

完整示例代码：把碎片拼成图

为了让大家kan得geng明白，咱们把刚才说的这些碎片拼凑成一个稍微完整一点的 示例代码 场景。假设咱们有一个商品列表，父组件管理列表和总数，子组件负责展示单个商品并触发加购。

还是那个被观察的类，它是地基：

@Observed
class ProductItem {
  name: string;
  price: number;
  image: string
  constructor {
    this.name = name;
    this.price = price;
    this.image = image
  }
}

然后是子组件。注意kan @ObjectLink 和 onAddToCart 的配合：

@Component
struct ProductCard {
  // 子组件用 @ObjectLink product: ProductItem 接收
  @ObjectLink product: ProductItem;
  // 接收回调函数
  onAddToCart:  => void;
  build {
    Column {
      Text
      Text
      Button
        .onClick => {
          // 这里Ke以Zuo一些子组件内部的逻辑
          // 比如修改 product 的某个属性，因为 @ObjectLink 的存在UI会自动geng新
          // 然后调用父组件的回调
          this.onAddToCart;
        })
    }
  }
}

Zui后是父组件，大权在握的指挥官：

@Entry
@Component
struct ShopPage {
  // 父组件用 new ProductItem 创建实例，并放在数组里
  @State productList: ProductItem = ;
  @State cartCount: number = 0;
  // 定义回调函数
  handleAddToCart =  => {
    // 修改变量必须用 this.xxx，否则报错
    this.cartCount += 1;
  }
  build {
    Column {
      Text
      ForEach => {
        // 传递数据时传递的是引用
        // 传递函数时直接写函数名，不需要任何装饰器
        ProductCard({
          product: item,
          onAddToCart: this.handleAddToCart
        })
      })
    }
  }
}

从“Neng跑”到“优雅”的进阶之路

回过头来kan，鸿蒙的这套父子传值机制，初学起来确实有点繁琐。又是 @Observed 又是 @ObjectLink，还得时刻盯着 this。但是当你真正理解了它的设计初衷，你会发现这套逻辑其实非常清晰且高效。

它强制你规范数据结构，强制你明确数据的流向，强制你区分“引用变化”和“属性变化”。这种严谨性，在大型项目开发中，简直就是救命稻草。它Neng帮你规避掉 90% 因为数据乱窜导致的莫名其妙的 Bug。

所以别抱怨它和 Vue 不一样了。试着去拥抱这种变化，把 @Observed 和 @ObjectLink 用熟了你会发现，鸿蒙开发的数据流转，其实也Ke以像丝般顺滑。下次再遇到数据不geng新的问题，别再怀疑人生了先检查一下你的装饰器是不是贴对了位置！

---