Svelte lifecycle

Skill morning-start/agent-skills/lang/svelte/svelte-lifecycle

AI 编程助手的专业技能库，涵盖 30+ 技能，按 6 类组织

Install

npx -y skills add morning-start/agent-skills --skill svelte-lifecycle

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Svelte 生命周期技能，掌握组件挂载、销毁、tick 等钩子，实现组件生命周期管理和 DOM 操作

SKILL.md

2.8 KB, as published. Nobody here has run it

Svelte Lifecycle

任务目标

本 Skill 用于：管理 Svelte 组件的生命周期
能力包含：挂载/销毁钩子、tick、命令式组件 API
触发条件：需要在组件生命周期特定阶段执行代码时

操作步骤

onMount - 挂载钩子

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    console.log('组件已挂载');
    return () => console.log('组件将销毁');
  });
</script>

onDestroy - 销毁钩子

<script>
  import { onDestroy } from 'svelte';

  onDestroy(() => {
    console.log('组件正在销毁');
  });
</script>

tick - DOM 更新同步

<script>
  import { tick } from 'svelte';

  async function updateAndLog() {
    count = 10;
    await tick();
    console.log('DOM 已更新');
  }
</script>

$effect.pre - 预更新效果

<script>
  import { tick } from 'svelte';

  let messages = $state([]);
  let div;

  $effect.pre(() => {
    if (!div) return;
    messages.length; // 依赖追踪
    if (div.offsetHeight + div.scrollTop > div.scrollHeight - 50) {
      tick().then(() => div.scrollTo(0, div.scrollHeight));
    }
  });
</script>

<div bind:this={div}>
  {#each messages as msg}
    <p>{msg}</p>
  {/each}
</div>

$effect.root - 根效果

<script>
  import { flushSync } from 'svelte';

  const cleanup = $effect.root(() => {
    let count = $state(0);

    $effect(() => {
      console.log('count:', count);
    });

    return () => console.log('root cleanup');
  });

  cleanup();
</script>

命令式组件挂载

import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, {
  target: document.getElementById('app'),
  props: { name: 'World' }
});

命令式组件卸载

import { mount, unmount } from 'svelte';

const app = mount(App, { target: document.body });
unmount(app);

SSR 渲染

import { render } from 'svelte/server';
import App from './App.svelte';

const { html, head } = render(App, {
  props: { name: 'World' }
});

Hydratable 数据

<script>
  let { data } = $props();
</script>

<!-- 数据在服务端序列化和客户端水合 -->
<p>{data.content}</p>

资源索引

生命周期钩子：https://svelte.dev/docs/svelte/lifecycle-hooks
命令式组件 API：https://svelte.dev/docs/svelte/imperative-component-api
Hydratable：https://svelte.dev/docs/svelte/hydratable

注意事项

onMount 不在服务端执行
onDestroy 在服务端也可以执行
$effect 在 DOM 更新后执行，$effect.pre 在更新前
$effect.root 用于在组件外创建响应式作用域