面试题：Svelte 项目中如何实现一个简单的生命周期钩子函数

Question

在 Svelte 中，假设有一个组件需要在组件创建时打印一条消息，在组件销毁时打印另一条消息。请写出实现这个功能的代码，并解释所使用的生命周期钩子函数的作用。

Answer 1

以下是在Svelte中实现该功能的代码：

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

    onMount(() => {
        console.log('组件已创建');
    });

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

<div>
    这是一个示例组件
</div>

生命周期钩子函数作用解释：

• onMount：
  • 该钩子函数会在组件被插入到DOM中后立即执行。这意味着当组件在页面上呈现时，onMount 内部的回调函数会被调用。通常用于需要在组件创建后立即执行的操作，比如初始化第三方库、绑定事件监听器等。
• onDestroy：
  • 当组件从DOM中移除时，onDestroy 内部的回调函数会被调用。这对于清理操作非常有用，比如解绑事件监听器、取消定时器等，以防止内存泄漏。