Alpine.js $watch与x-effect有什么区别

Alpine.js 的 $watch 显式监听指定属性，属性改变后才调用回调，能取得新值和旧值；x-effect 自动收集表达式读取的响应式依赖，初始化时立即执行，依赖改变后重新执行，没有自动传入的旧值参数。需要判断“从什么变成什么”，选 $watch；需要一个动作跟随多个当前值，并接受初次执行，考虑 x-effect。

官方地址：https://alpinejs.dev/

本文讨论普通 Alpine 组件中的响应式行为，不把监听器当作权限控制或保存成功的凭据。两者都不会替应用决定哪些数据可以记录、提交或修改。

先划清状态和副作用的范围

以阅读偏好组件为例，mode 表示显示模式，fontSize 表示字号，lastTransition 保存切换摘要。这些状态应与外部请求、存储、日志区分开。显示文字通常用 x-text 即可；同步外部对象等额外动作才需要专门设计副作用。

首先确定动作允许读取什么、写到哪里、是否允许页面加载时发生。如果只想在用户切换模式后记录变化，却放进 x-effect，初次调用可能被误当作用户操作。这是调用时机选择错误，不意味着框架遭到攻击。

三个差异决定该用哪一种

“不调用”指 $watch 的业务回调，不表示注册时不读取属性。x-effect 也不是无条件监视组件全部字段，表达式和同步调用的函数实际读取什么，才决定依赖范围；条件分支会影响实际读取的数据。这些规则见 官方生命周期说明 和 x-effect 文档。

在同一组件里对照首次调用和新旧值

以下片段用于已经加载 Alpine 的页面，只改变组件文字，不发送请求或写入存储。它是说明性示例，不是本文环境的运行记录。

    切换模式
    增加字号
    

    
    

按文档语义，初始化时摘要保留“尚未切换”，effect 使用当前模式和字号生成文字。切换 mode 时，$watch 用 oldValue 组合前后摘要；改变 fontSize 不属于此 $watch 的路径，却属于 effect 的依赖。

这个 effect 仅用于展示语义。生产需求若只是显示文字，直接写 x-text="mode + ' / ' + fontSize + 'px'" 更清楚。不要以连续同步赋值的回调次数作为点击次数或业务事件日志，两种机制关注状态，不替代明确的事件处理。

监听对象时，别把派生字段写回同一对象

$watch 支持 settings.mode 这样的点路径，也支持监听整个 settings。监听整个对象时，深层变化会被观察到，但回调得到的是所监听对象的值，不是自动提取出的变化子字段。官方明确提醒，在回调中修改被监听对象的属性可能形成无限循环，见 $watch 文档。

仅关注模式切换时，缩小监听路径，把输出 summary 放在 settings 之外：

    切换模式
    

这不是“所有回写一定循环”的机械规则，而是可维护的设计选择：源状态与派生输出分离，影响范围更容易判断。oldValue 也不是完整业务历史仓库，长期追踪仍需明确的应用记录。

自动执行不等于允许自动提交

副作用风险应分级：重复设置展示文字通常影响有限；写入存储会改变后续会话；自动请求可能创建或覆盖数据。保存若必须由用户确认，应放到明确提交事件中，不能以换成 $watch 就假定获得确认。

x-effect 同步调用的辅助函数若读取其他字段，可能扩大依赖范围，重构时需同步考虑。$watch 回调读取额外状态，则不应被理解为自动监视整个组件。

日志只记录必要事件类别、字段名或布尔状态，不把整个表单、口令、令牌序列化到 console。最小化日志是应用的控制措施，两个 API 都不自动脱敏。确实需要自动请求时，还需单独处理防抖、失败与过期响应，本例没有实现这些能力。

选择与接入时核对这些边界

• 需要前后值比较：使用 $watch 两参数回调。
• 初次加载也需要同步：使用 x-effect，或明确安排初始化动作。
• 只显示文本、样式或可见性：优先对应模板指令。
• 只关注子字段：指定点路径，不默认监视整个对象。
• 检查写入范围：派生输出不无意回写源对象。
• 保存与授权使用明确事件，不以状态变化冒充操作凭据。

读者接入后可分别改变 mode、fontSize，观察对应展示，再检查页面刚加载是否出现不应发生的外部动作。这是可执行的观察项，不是本文已经完成的测试记录。

$watch 可以在注册时立即调用吗？

默认不会。需要初次同步时，明确调用初始化逻辑，再注册变化监听；若接受自动依赖和初次执行，可以用 x-effect。

x-effect 能直接取得 oldValue 吗？

没有 $watch 那样的自动旧值参数。若核心任务是对照某个属性前后值，通常改用 $watch 更直接。

监听整个对象会告诉我哪个键改变了吗？

不会自动生成字段路径或变更清单。关注单个叶子值就监听点路径；复杂差异由应用定义比较规则。

选 API 前先明确依赖和副作用：$watch 强调路径与前后值，x-effect 强调当前依赖与初次同步，两者都不能替代授权、业务事件或可靠保存流程。