Keep-Alive

问题

在 euv 中，使用 match 或 if/else 切换组件时，旧分支的组件会被销毁，新分支的组件会重新创建。这意味着切换回来时，所有 Hook 状态（信号值、表单输入、定时器等）都会重置。

解决方案：CSS display 切换

同时渲染所有 Tab 内容，通过 CSS display: none/block 控制可见性，而非条件渲染。这样所有 DynamicNode 及其 HookContext 保持存活——信号保留值、setInterval 继续运行、表单输入得到保留。

let tab: Signal<String> = use_signal(|| "counter".to_string());

html! {
    div {
        // Tab 栏
        div {
            div {
                style: {
                    border_bottom: if { tab.get() == "counter" } { "2px solid #4f46e5".to_string() } else { "2px solid transparent".to_string() };
                }
                onclick: move |_event: NativeEvent| { tab.set("counter".to_string()); }
                "Counter"
            }
            div {
                style: {
                    border_bottom: if { tab.get() == "form" } { "2px solid #4f46e5".to_string() } else { "2px solid transparent".to_string() };
                }
                onclick: move |_event: NativeEvent| { tab.set("form".to_string()); }
                "Form"
            }
        }
        // 同时渲染所有 Tab，用 display 控制可见性
        div {
            style: { display: if { tab.get() == "counter" } { "block".to_string() } else { "none".to_string() }; }
            { counter_tab() }
        }
        div {
            style: { display: if { tab.get() == "form" } { "block".to_string() } else { "none".to_string() }; }
            { form_tab() }
        }
    }
}

适用场景

|| 场景 | 说明 | || ------------------ | ---------------------------------------------------------------- | || 多 Tab 切换 | Tab 内容需要保持滚动位置、输入值、展开/折叠状态 | || 定时器保持 | 后台 Tab 中的 setInterval 继续运行 | || 表单状态保留 | 用户在多个 Tab 中填写表单，切换后不丢失输入 | || 计数器/进度保持 | 进度条、计时器等需持续更新的状态 |

注意

所有 Tab 内容会同时存在于 DOM 中，对于包含大量节点的 Tab 需注意性能影响。

加载中...