面试题：Svelte中use:指令的基本用法

Question

请简述Svelte中use:指令的基本用途，并举例说明如何使用内置的Svelte Action以及它对DOM元素产生的影响。

Answer 1

Svelte 中 use: 指令的基本用途

use: 指令用于将一个 action 应用到 DOM 元素上。Action 是一种函数，它可以在元素被创建、更新或销毁时执行自定义逻辑，这使得我们可以轻松地为 DOM 元素添加额外的行为，而无需手动操作 DOM。

内置 Svelte Action 的使用示例及对 DOM 元素的影响

示例：bind:this 与自定义 Action

假设我们要创建一个简单的点击计数的 action：

1. 创建 Action

   <script>
     function clickCounter(node) {
       let count = 0;
       const handleClick = () => {
         count++;
         console.log(`Clicked ${count} times`);
       };
       node.addEventListener('click', handleClick);
       return {
         destroy() {
           node.removeEventListener('click', handleClick);
         }
       };
     }
   </script>
   

2. 在组件中使用 Action

   <div use:clickCounter>
     Click me
   </div>
   

   在这个例子中，use:clickCounter 将 clickCounter 这个 action 应用到 <div> 元素上。当这个 <div> 被创建时，clickCounter 函数中的代码会执行，为该元素添加一个点击事件监听器。每次点击时，计数器 count 会增加并在控制台打印点击次数。当这个 <div> 从 DOM 中移除时，destroy 函数会被调用，移除点击事件监听器，防止内存泄漏。

内置 Action：focus

1. 使用 focus Action

   <script>
     import { focus } from'svelte/action';
   </script>
   <input type="text" use:focus />
   

   这里使用了 Svelte 内置的 focus action。当组件渲染时，use:focus 会自动将焦点设置到 <input> 元素上。这是一个非常方便的内置 action，常用于需要用户立即输入的表单元素。对 DOM 元素的影响就是使该元素获得焦点，键盘输入会直接作用于该元素。