面试题：Svelte自定义Action的实现与应用

Question

假设你需要实现一个自定义的Svelte Action，用于在鼠标悬停在元素上时，平滑地改变元素的透明度。请写出该自定义Action的代码，并说明如何在组件中使用它，同时解释在这个过程中如何处理生命周期相关的操作。

Answer 1

自定义Svelte Action代码

<script>
    export function fadeOnHover(node) {
        const handleMouseEnter = () => {
            node.style.transition = 'opacity 0.3s ease';
            node.style.opacity = '0.5';
        };
        const handleMouseLeave = () => {
            node.style.transition = 'opacity 0.3s ease';
            node.style.opacity = '1';
        };

        node.addEventListener('mouseenter', handleMouseEnter);
        node.addEventListener('mouseleave', handleMouseLeave);

        return {
            destroy() {
                node.removeEventListener('mouseenter', handleMouseEnter);
                node.removeEventListener('mouseleave', handleMouseLeave);
            }
        };
    }
</script>

在组件中使用

<script>
    import { fadeOnHover } from './fadeOnHover.js';
</script>

<div use:fadeOnHover>
    鼠标悬停时透明度改变
</div>

生命周期相关操作解释

1. 添加事件监听器：在自定义Action函数fadeOnHover内部，通过node.addEventListener添加了mouseenter和mouseleave事件监听器。这是在Action初始化阶段进行的操作，用于设置元素的行为，属于“挂载”阶段的操作。
2. 移除事件监听器：在返回的对象中有一个destroy函数，在这个函数内部通过node.removeEventListener移除了之前添加的事件监听器。这对应于Svelte组件的“卸载”阶段，确保在元素从DOM中移除时，不会残留无效的事件监听器，避免内存泄漏等问题。