面试题：Svelte 中 use: 指令实现 DOM 操作的原理及基础应用

Question

请阐述 Svelte 中 use: 指令用于 DOM 操作的基本原理。并举例说明如何使用 use: 指令为一个按钮添加点击后改变颜色的交互效果，要求写出完整的 Svelte 组件代码。

Answer 1

Svelte 中 use: 指令用于 DOM 操作的基本原理

1. 自定义行为封装：use: 指令允许开发者将复杂的 DOM 相关逻辑封装成可复用的自定义行为（actions）。这些行为本质上是函数，当元素被插入到 DOM 中时，这些函数会被调用，从而为元素附加特定的功能。
2. 生命周期关联：actions 与元素的生命周期紧密相关。当元素插入到 DOM 时，action 函数被调用，返回的任何清理函数会在元素从 DOM 中移除时执行，使得资源管理更加方便，比如移除事件监听器等。

为按钮添加点击后改变颜色交互效果的 Svelte 组件代码

<script>
    // 定义一个 action 函数
    function clickChangeColor(node) {
        const handleClick = () => {
            node.style.color = 'red';
        };
        node.addEventListener('click', handleClick);
        return {
            destroy() {
                node.removeEventListener('click', handleClick);
            }
        };
    }
</script>

<button use:clickChangeColor>点击我改变颜色</button>

在上述代码中：

1. 定义了一个 clickChangeColor 的 action 函数，它接收一个 node 参数，这个参数就是绑定了该 action 的 DOM 元素。
2. 在 clickChangeColor 函数内部，添加了一个点击事件监听器，当按钮被点击时，改变按钮文本颜色为红色。
3. 函数返回一个对象，其中 destroy 方法用于在元素从 DOM 移除时清理事件监听器，防止内存泄漏。
4. 最后在按钮元素上使用 use:clickChangeColor 指令，将这个自定义行为应用到按钮上。