ArrowJS响应式链式更新疑问：DOM未同步更新total值

你的问题核心是误用了ArrowJS的watch函数来维护派生响应式状态，导致DOM无法同步更新data.total的变化。

为什么原代码无法触发DOM更新？ #

ArrowJS中watch的设计定位是执行副作用操作（比如打印日志、发送网络请求、手动操作DOM等），而非维护派生的响应式数据。当你在watch回调中给data.total赋值时，虽然data.total是响应式属性，但这个赋值处于副作用执行上下文，ArrowJS的响应式系统不会主动触发依赖于data.total的订阅更新（也就是模板中的DOM渲染逻辑）。

尽管data.total的值确实会随price/quantity变化，但模板中对data.total的订阅并没有被正确触发重新执行，因此DOM始终显示初始值0。

而直接在模板中使用${() => data.price * data.quantity}时，这个匿名函数会被ArrowJS识别为响应式计算逻辑，自动追踪price和quantity的变化，一旦这两个值修改，函数会重新计算并同步更新DOM，这是符合ArrowJS响应式设计的正确用法。

正确的实现方式 #

维护派生响应式状态应该使用computed函数（或响应式对象的getter），而非watch。以下是两种可行的修正方案：

方案1：使用computed创建独立的派生值

import { reactive, computed, html } from 'https://cdn.skypack.dev/@arrow-js/core';

let data = reactive({
    price: 0,
    quantity: 1,
});

// 用computed创建自动更新的派生响应式值
const total = computed(() => data.price * data.quantity);

html`Total: ${total}`(document.getElementById('output'));

window.data = data;

方案2：在响应式对象中使用getter

import { reactive, html } from 'https://cdn.skypack.dev/@arrow-js/core';

let data = reactive({
    price: 0,
    quantity: 1,
    // 用getter定义派生属性，自动响应price/quantity的变化
    get total() {
        return this.price * this.quantity;
    }
});

html`Total: ${() => data.total}`(document.getElementById('output'));

window.data = data;

总结 #

你的理解偏差在于对watch的定位误解——它不是用来维护派生状态的工具，而是处理副作用的手段。使用computed或响应式对象的getter，才能让ArrowJS的响应式系统正确追踪链式依赖，实现数据变化到DOM更新的自动同步。

内容的提问来源于stack exchange，提问作者threenplusone