04.属性绑定与响应式原理

QML 的核心魔法——改一个值，UI 自动更新。背后的依赖追踪、脏标记、惰性求值机制，让这套"响应式"跑在嵌入式的 CPU 上也不卡。

1. 案例引入

1.1 一个"不能删"的绑定

Rectangle {
    id: rect
    width: 200
    color: parent.width > 400 ? "red" : "blue"
    // 绑定表达式：依赖 parent.width
}

// 当窗口大小改变时，color 自动切换
// 这不神奇，但下面的才是陷阱：

Component.onCompleted: {
    rect.color = "green"
    // 绑定被破坏了！之后 parent.width 变化，color 不再变
    // 因为 JavaScript 赋值用"值"覆盖了"绑定"
}

1.2 魔法背后的问题

Q1: QML 如何"知道" color 依赖 parent.width？
Q2: 当 parent.width 改变时，QML 如何"传播"变化？
Q3: 为什么 JavaScript 赋值会破坏绑定？
Q4: 在 60fps 的约束下，QML 如何保证绑定求值不影响帧率？

---

2. 绑定机制原理

2.1 依赖收集

当你写：
  color: parent.width > 400 ? "red" : "blue"

QML 引擎做的事：
  1. 创建 QQmlBinding 对象，关联"目标属性"和"表达式"
  2. 首次求值：parent.width > 400 → false → "blue"
  3. 在求值过程中，引擎"监听"所有被读取的属性
     - parent.width 被读取 → 记录依赖: color 依赖 parent.width
  4. 当 parent.width 变化 → 引擎通知所有依赖项
     - rect.color 标记为"dirty"
  5. 下一帧同步阶段，重新求值 rect.color

2.2 脏标记与惰性求值

为什么不是"立刻"求值？

如果 parent.width 每帧变化 10 次（动画中常见）：
  立刻求值 → color 求值 10 次 → 浪费 CPU
  惰性求值 → 标记 dirty → 渲染前只求值 1 次 → 高效

关键机制：
  - 每个属性的求值都是惰性的（delayed evaluation）
  - 只有标记 dirty 并在需要渲染或读取时才会求值
  - 多次变化在一次帧循环中被"合并"

2.3 绑定与赋值的冲突

rect.color: parent.width > 400 ? "red" : "blue"
    ↑ 这是"表达式绑定"——当 parent.width 改变时重新求值

rect.color = "green"
    ↑ 这是"值赋值"——用固定值覆盖绑定
    ↓ 赋值后，原来的绑定被删除

规则：JavaScript 赋值永远覆盖 QML 绑定（单向）
恢复绑定：使用 Qt.binding()
  rect.color = Qt.binding(function() {
      return parent.width > 400 ? "red" : "blue"
  })

---

3. 依赖追踪的底层实现

3.1 QQmlNotifier 和 QQmlEngine 的角色

每个 QObject 属性对应一个 QQmlNotifier（通知器）
  parent.width → QQmlNotifier
  rect.color   → QQmlNotifier

绑定过程：
  QQmlBinding(color, "parent.width > 400 ? ...")
    ↓ 首次求值时
  QQmlEngine 开启"依赖收集模式"
    ↓ 表达式读取 parent.width
  parent.width 的 QQmlNotifier 记录：rect.color 依赖我
    ↓ 关闭收集模式
  依赖图：parent.width ──影响──→ rect.color

变化传播：
  parent.width = 500
    ↓ QQmlNotifier 发出通知
  QQmlEngine 遍历依赖：rect.color → 标记 dirty
    ↓ 渲染帧
  求值 rect.color → "red"

3.2 双向绑定

// 使用 Binding QML 类型实现双向
Binding {
    target: slider
    property: "value"
    value: spinner.value
}

Binding {
    target: spinner
    property: "value"
    value: slider.value
}

// slider.value 改变 → spinner.value 更新 → slider.value 重新求值
// QML 引擎有防循环机制（当值相同则停止传播）

---

4. 实战案例：仪表盘绑定

Rectangle {
    id: dashboard
    width: 800; height: 480

    // 数据层
    property real speed: 0
    property real rpm: 0
    property real fuel: 100
    property bool warning: speed > 120 || rpm > 5000

    // 速度表
    Canvas {
        id: speedGauge
        width: 300; height: 300
        onPaint: {
            var ctx = getContext("2d");
            // 根据 speed 绘制指针
            var angle = (dashboard.speed / 200) * 270 - 135;
            drawNeedle(ctx, angle);
        }
        // 当 speed 变化 → dirty → onPaint 触发 → 重新绘制
    }

    // 警告指示器
    Rectangle {
        anchors.top: speedGauge.bottom
        color: dashboard.warning ? "red" : "green"
        Text { text: dashboard.warning ? "⚠" : "✓" }
    }

    // 数据更新（模拟 CAN 总线数据）
    Timer {
        interval: 100  // 100ms 更新
        running: true
        repeat: true
        onTriggered: {
            dashboard.speed = Math.random() * 200;
            dashboard.rpm = Math.random() * 7000;
            // 仅这两行赋值 → 自动触发仪表盘重绘 + 警告状态切换
        }
    }
}

// 依赖图：
// speed  ──→ speedGauge (Canvas paint) + warning (bool)
// rpm    ──→ warning (bool)
// fuel   → (其他组件)
// warning → 警告指示器 (color + text)
//
// Timer 每 100ms 改 speed/rpm → 自动传播 → UI 更新
// 开发者只需关心数据，不用手动操作任何 UI

---

5. 性能陷阱与优化

// 陷阱 1：过多不必要的绑定
// ❌
property string displayText: name + " - " + email + " - " + role
// 每次 name/email/role 任一变化都重新求值
// 如果 3 个属性同时变 → 3 次求值 → 只有最后一次有效

// ✅
onNameChanged: updateDisplayText()
function updateDisplayText() {
    displayText = name + " - " + email + " - " + role
}

// 陷阱 2：绑定循环
// ❌
width: parent.width    // A 依赖 B
// 同时在 parent 中
width: child.width     // B 依赖 A
// 引擎检测到循环 → 报警告，但可能影响性能

// 陷阱 3：绑定表达式中的 JS
// ❌
color: {
    var result = complexCalculation();
    return result;
}
// 每次依赖变化，都执行整个 JS 块 → 慢

// ✅ 把计算放 C++ 层
color: MyBackend.colorForSpeed(speed)  // C++ 执行

---

6. 速查表

概念	含义
QQmlBinding	绑定对象：目标属性 + 表达式 + 依赖列表
QQmlNotifier	通知器：属性变化时通知依赖项
dirty flag	脏标记：属性需重新求值
惰性求值	标记 dirty，渲染前才求值
Qt.binding()	JS 中恢复绑定
Binding { }	QML 声明式双向绑定

---

下一篇：05.可视元素与布局原理