在 Svelte 中，对条件块（如 {#if}）内的元素使用 bind:this 时，常因元素尚未挂载而返回 null；推荐使用自定义 action 在节点实际挂载时精准捕获 DOM 引用，避免竞态与延时 hack。
在 svelte 中，对条件块（如 `{#if}`）内的元素使用 `bind:this` 时，常因元素尚未挂载而返回 `null`；推荐使用自定义 action 在节点实际挂载时精准捕获 dom 引用，避免竞态与延时 hack。
Svelte 的 bind:this 是一种便捷的 DOM 引用绑定方式，但它依赖于组件的生命周期：只有当元素真实渲染并挂载到 DOM 后，绑定变量才会被赋值。而在条件块（如 {#if someCondition}）中，元素仅在条件为真时才创建——这意味着即使你同步将 someCondition 设为 true，divName 也不会立即可用。其赋值发生在下一次微任务（microtask）或下一帧渲染完成之后，因此紧随其后的 divName.innerText = 'hello' 会触发 Cannot set properties of null 错误。
❌ 错误做法：同步访问 + setTimeout 延迟
<script>
let someCondition = false;
let divName;
function enable() {
someCondition = true;
// ❌ 危险！此时 divName 还未被 bind:this 赋值
if (someCondition) divName.innerText = 'hello'; // TypeError: Cannot set property 'innerText' of null
}
</script>
{#if someCondition}
<div bind:this="{divName}"></div>
{/if}
依赖 setTimeout(..., 0) 或 await tick() 属于不稳定的“时机猜测”，在复杂更新、服务端渲染（SSR）或动画场景下极易失效，且违背响应式设计原则。
✅ 正确方案：使用 Action 实现精准挂载回调
Svelte 提供了 action 机制——它允许你在元素挂载（mounted） 和 卸载（unmounted） 时执行自定义逻辑，天然规避时机问题：
<script>
let visible = false;
// 自定义 action：接收 node 并可选返回 cleanup 函数
function focusOnMount(node) {
// ✅ 此时 node 已真实存在于 DOM 中
console.log('Element mounted:', node);
node.textContent = 'Hello from action!';
// 可选：监听状态变化或清理资源
return {
destroy() {
console.log('Element unmounted');
}
};
}
function toggle() {
visible = !visible;
}
</script><button on:click="{toggle}">Toggle Visibility</button>
{#if visible}
<!-- action 在元素插入 DOM 后立即执行 -->
<div use:focusonmount></div>
{/if}
? 关键优势：
- use:xxx 回调在 DOM 节点挂载后同步触发，无需手动等待；
- 支持返回 destroy 函数，在元素销毁时自动清理（如移除事件监听器、取消定时器）；
- 可封装复用（如 use:autofocus、use:tooltip），提升代码可维护性。
? 进阶：带参数的可配置 Action
若需动态控制行为，可向 action 传参：
<script>
function setStyle(node, options = {}) {
const { color = 'blue', fontSize = '1rem' } = options;
node.style.color = color;
node.style.fontSize = fontSize;
}
</script>
{#if visible}
<!-- 传递配置对象 -->
<div use:setstyle="{{" color: fontsize:>Styled content</div>
{/if}
⚠️ 注意事项
- 不要在 action 内部直接修改 bind:this 变量（如 divName = node），这会破坏响应式一致性；应通过 action 本身完成所需操作；
- 若需在外部 JS 中访问该节点，请结合 export let 或 store 管理状态，而非暴露 DOM 引用；
- SSR 环境下，action 的 node 参数仅在客户端有效，服务端不执行（符合预期）。
总之，面对条件渲染中的 DOM 引用需求，优先选择 use:action 而非 bind:this + 延迟策略——它更可靠、更语义化，也更契合 Svelte 的声明式与生命周期设计理念。
