面试题：Svelte自定义Action与生命周期函数的交互

1. 自定义Action与组件生命周期函数交互场景

组件创建时触发Action：在组件的onMount生命周期函数中应用自定义Action，这样当组件挂载到DOM时，Action开始生效。例如在延迟显示元素的场景中，组件挂载后开始计时延迟显示。
组件更新时Action的影响：如果组件更新（beforeUpdate和afterUpdate生命周期），自定义Action可能需要根据新的状态重新计算或调整其行为。比如如果延迟时间在组件更新时改变，Action需要相应调整延迟逻辑。
组件销毁时清理Action：在onDestroy生命周期函数中，可以清理自定义Action创建的任何副作用，如清除定时器等，防止内存泄漏。

2. 代码示例

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

    function delayShow(node, delay) {
        let timer;
        const start = () => {
            timer = setTimeout(() => {
                node.style.display = 'block';
            }, delay);
        };
        start();
        return {
            destroy() {
                clearTimeout(timer);
            }
        };
    }

    let delayTime = 3000;
    onMount(() => {
        // 这里其实在delayShow函数内部已经在组件挂载时开始计时了
        // 可以理解为通过在组件挂载时调用自定义Action间接关联了生命周期
    });
    onDestroy(() => {
        // 清理定时器
    });
</script>

<div use:delayShow={delayTime} style="display: none;">延迟显示的元素</div>

在上述代码中：

delayShow是自定义Action，接收一个节点node和延迟时间delay。
onMount生命周期函数虽然在代码里没有直接逻辑，但实际上自定义Action是在组件挂载时通过use指令应用到元素上开始计时。
onDestroy生命周期函数用于清理定时器，防止内存泄漏，在delayShow的返回对象中的destroy函数中实现。
元素初始display: none，通过delayShow这个自定义Action在指定延迟时间后显示。

面试题：Svelte自定义Action与生命周期函数的交互

知识考点

面试题答案

1. 自定义Action与组件生命周期函数交互场景

2. 代码示例