wire:replace

Livewire 的 DOM diffing 对于更新页面上的现有元素很有用，但有时你可能需要强制某些元素从头开始渲染以重置内部状态。

在这些情况下，你可以使用 wire:replace 指令指示 Livewire 跳过元素子元素的 DOM diffing，而是完全用服务器的新元素替换内容。

这在使用第三方 JavaScript 库和自定义 Web 组件或当元素重用可能在保持状态时导致问题的情况下最有用。

以下是使用 shadow DOM 的 Web 组件包装 wire:replace 的示例，以便 Livewire 完全替换元素，允许自定义元素处理自己的生命周期：

blade

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

    <div wire:replace>
        <!-- 此自定义元素将具有自己的内部状态 -->
        <json-viewer>@json($someProperty)</json-viewer>
    </div>

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

你还可以指示 Livewire 使用 wire:replace.self 替换目标元素及其所有子元素。

blade

<div x-data="{open: false}" wire:replace.self>
  <!-- 确保在每次渲染时将 "open" 状态重置为 false -->
</div>

wire:replace ​

wire:replace