状态管理 V2（ObservedV2）

API 12 推出的新状态管理机制，使用 @Trace/@Local/@Param/@Event，性能更强、颗粒度更细。

---

1. V1 vs V2 对比

特性	V1	V2 (API 12+)
本地状态	@State	@Local
父子传参	@Prop/@Link	@Param
父→子事件	@BuilderParam	@Event
深度监听	@Observed + @ObjectLink	@Trace（直接支持）
跨树共享	@Provide/@Consume	@Provide/@Consume（保留）
全局存储	AppStorage	AppStorage（保留）
性能	中等	更强（Signal/Proxy）

---

2. V2 的核心装饰器

2.1 @Local — 本地状态

import { Local, Param, Event } from '@kit.ArkUI'

@Component
struct Counter {
    @Local count: number = 0

    build() {
        Column() {
            Text(`计数: ${this.count}`)
            Button('增加')
                .onClick(() => {
                    this.count++
                })
        }
    }
}

2.2 @Param — 父传子

// 子组件
@Component
struct Child {
    @Param name: string  // 接收父组件数据
    @Param age: number
    @Event onChange: (newName: string) => void  // 向父发送事件

    build() {
        TextInput({ value: this.name })
            .onChange((value: string) => {
                this.onChange(value)  // 通知父组件
            })
    }
}

// 父组件
@Entry
@Component
struct Index {
    @Local name: string = '小明'
    @Local age: number = 25

    build() {
        Column() {
            Child({
                name: this.name,
                age: this.age,
                onChange: (newName: string) => {
                    this.name = newName
                }
            })
        }
    }
}

2.3 @Event — 子→父事件

// 子组件
@Component
struct FormSubmit {
    @Param formData: FormInfo
    @Event onSubmit: (info: FormInfo) => void
    @Event onCancel: () => void

    build() {
        Column() {
            Button('提交')
                .onClick(() => {
                    this.onSubmit(this.formData)
                })
            Button('取消')
                .onClick(() => {
                    this.onCancel()
                })
        }
    }
}

// 父组件
@Entry
@Component
struct Index {
    build() {
        Column() {
            FormSubmit({
                formData: { name: '小明', age: 25 },
                onSubmit: (info: FormInfo) => {
                    // 处理提交
                    console.log(info)
                },
                onCancel: () => {
                    // 处理取消
                }
            })
        }
    }
}

---

3. @Trace — 深度监听

3.1 V2 的核心改进

V2 最核心的改进是 @Trace 可以直接深度监听嵌套对象，不再需要 @Observed + @ObjectLink！

import { Trace, Local } from '@kit.ArkUI'

@Component
struct Index {
    @Local data: {
        user: {
            name: string
            address: {
                city: string
                street: string
            }
        }
    } = {
        user: {
            name: '小明',
            address: {
                city: '北京',
                street: '长安街'
            }
        }
    }

    build() {
        Column() {
            Text(`${this.data.user.address.city}`)

            Button('修改城市')
                .onClick(() => {
                    // ✅ V2 可以直接修改嵌套属性并触发更新！
                    this.data.user.address.city = '上海'
                })
        }
    }
}

3.2 @Trace 的规则

// 需要深度监听的属性使用 @Trace
@Trace deepObject: {
    name: string
    nested: {
        value: number
    }
}

// 不需要深度监听的可以用 @Local
@Local simpleValue: string

---

4. V2 的性能优势

4.1 Signal + Proxy 双机制

V1:
@State → Proxy 拦截 → 脏节点标记 → build()
  （粗粒度，对象级变化）

V2:
@Local/@Trace → Signal → 细粒度监听 → 精准刷新
  （细粒度，属性级变化）

4.2 性能对比

维度	V1	V2
监听粒度	对象级	属性级
嵌套对象监听	需要 @Observed	@Trace 直接支持
变更通知	标记整个节点	精准通知
性能	中等	更强

---

5. V2 迁移指南

5.1 V1 → V2 对照表

V1	V2	说明
@State	@Local	本地状态
@Prop	@Param	父→子传参
@Link	@Param	双向绑定
@ObjectLink	@Trace	深度监听
@BuilderParam	@Event	回调事件

5.2 迁移示例

// V1 写法
@Component
struct Child {
    @State count: number = 0
    @Prop name: string = ''
    @Link userName: string = ''
    @ObjectLink user: UserData = new UserData()
}

// V2 写法
@Component
struct Child {
    @Local count: number = 0
    @Param name: string = ''
    @Param userName: string = ''
    @Trace user: UserData  // 直接深度监听
}

---

6. 面试高频考点

Q1: 状态管理 V2 是什么？

回答：API 12 推出的新状态管理机制，使用 @Trace/@Local/@Param/@Event，基于 Signal 和 Proxy，支持深层嵌套对象属性监听，无需 @ObjectLink，性能更强，颗粒度更细。

Q2: V2 中 @Local 对应 V1 的什么？

回答：@Local 对应 V1 的 @State，表示组件内部状态。

Q3: V2 中如何实现父子双向绑定？

回答：使用 @Param（接收父组件数据）和 @Event（向父组件发送事件修改数据）。

Q4: @Trace 相比 @ObjectLink 的优势？

回答：@Trace 直接深度监听嵌套对象属性，无需 @Observed 类装饰；颗粒度更细（属性级），性能更好。

---

🐱 小猫提示：状态管理 V2 是区分初级和高级鸿蒙开发的分水岭。记住 "@Trace 直接深度监听、@Local=本地状态、@Param=父传子、@Event=子传父"。