$watch

你可以使用 $watch 魔术方法来"监听"组件属性。例如：

<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
    <button @click="open = ! open">Toggle Open</button>
</div>

在上面的示例中，当按钮被按下且 open 发生变化时，所提供的回调函数将被触发，并 console.log 输出新值：

你可以使用"点"符号来监听深层嵌套的属性

<div x-data="{ foo: { bar: 'baz' }}" x-init="$watch('foo.bar', value => console.log(value))">
    <button @click="foo.bar = 'bob'">Toggle Open</button>
</div>

当 <button> 被按下时，foo.bar 将被设置为 "bob"，并且 "bob" 将被记录到控制台。

获取"旧"值

$watch 会跟踪被监听属性的旧值，你可以通过回调的第二个可选参数来访问它，如下所示：

<div x-data="{ open: false }" x-init="$watch('open', (value, oldValue) => console.log(value, oldValue))">
    <button @click="open = ! open">Toggle Open</button>
</div>

深度监听

$watch 会自动监听任何层级的变更，但需要注意的是，当检测到变更时，watcher 返回的是被监听属性的值，而不是发生变更的子属性的值。

<div x-data="{ foo: { bar: 'baz' }}" x-init="$watch('foo', (value, oldValue) => console.log(value, oldValue))">
    <button @click="foo.bar = 'bob'">Update</button>
</div>

当 <button> 被按下时，foo.bar 将被设置为 "bob"，并且 "{bar: 'bob'} {bar: 'baz'}" 将被记录到控制台（新值和旧值）。

⚠️ 在 $watch 回调中作为副作用修改被"监听"对象的属性，会产生无限循环并最终导致错误。

<!-- 🚫 无限循环 -->
<div x-data="{ foo: { bar: 'baz', bob: 'lob' }}" x-init="$watch('foo', value => foo.bob = foo.bar)">
    <button @click="foo.bar = 'bob'">Update</button>
</div>