面试题：Svelte组件内脚本的条件逻辑与生命周期

Question

描述在Svelte组件内脚本中，如何使用条件逻辑来控制组件的部分渲染，并且结合组件的生命周期函数，在组件首次挂载时和销毁前分别执行特定的JavaScript逻辑。请给出代码实现。

Answer 1

以下是一个Svelte组件示例，展示了如何使用条件逻辑控制部分渲染，并结合生命周期函数在组件首次挂载和销毁前执行特定逻辑：

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

    let showComponent = true;

    // 组件首次挂载时执行
    onMount(() => {
        console.log('组件已挂载');
    });

    // 组件销毁前执行
    onDestroy(() => {
        console.log('组件即将销毁');
    });
</script>

{#if showComponent}
    <div>
        <p>这是组件要渲染的部分</p>
    </div>
{/if}

<button on:click={() => showComponent =!showComponent}>
    {showComponent? '隐藏组件' : '显示组件'}
</button>

在上述代码中：

1. 使用{#if}块实现条件渲染逻辑，只有当showComponent为true时，<div>及其内部内容才会渲染。
2. 通过import { onMount, onDestroy } from'svelte';引入Svelte的生命周期函数。
3. onMount函数在组件首次挂载到DOM时执行，在此示例中，打印组件已挂载。
4. onDestroy函数在组件从DOM中移除前执行，在此示例中，打印组件即将销毁。
5. 通过按钮的点击事件切换showComponent的值，从而控制组件部分的显示与隐藏。