wire:replace

Livewire 的 DOM diff 适合更新页面上已有元素，但偶尔你需要强制某些元素从头渲染，以重置内部状态。

这时可以用 wire:replace 指令，让 Livewire 跳过对该元素子节点的 DOM diff，改为用服务端返回的新元素完全替换内容。

这在对接第三方 JavaScript 库和自定义 Web Components 时最有用，或者在复用元素会导致状态问题时。

下面示例用 wire:replace 包裹带 shadow DOM 的 Web Component，让 Livewire 完全替换该元素，由自定义元素自行管理生命周期：

<form>
    <!-- ... -->

    <div wire:replace>
        <!-- This custom element would have its own internal state -->
        <json-viewer>@json($someProperty)</json-viewer>
    </div>

    <!-- ... -->
</form>

也可以用 wire:replace.self 让 Livewire 同时替换目标元素本身及其所有子元素。

<div x-data="{open: false}" wire:replace.self>
  <!-- Ensure that the "open" state is reset to false on each render -->
</div>

参考

wire:replace

修饰符

修饰符	说明
.self	替换元素本身及所有子节点，而不只是子节点