监视 $watch 753f5cf480d440019235e7185bf30183.md

监视: $watch

---

你可以使用**$watch**魔法“监视”组件属性。例如：

<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
    <button @click="open = ! open">切换 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'">切换 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">切换 Open</button>
</div>

监视深度

---

**$watch**魔法将自动监视任何级别的更改，当检测到发生变化时，监视器将返回监视的属性的值，而不是发生更改的子属性的值。

<div x-data="{ foo: { bar: 'baz' }}" x-init="$watch('foo', (value, oldValue) => console.log(value, oldValue))">
    <button @click="foo.bar = 'bob'">更新</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>