防止 Svelte 组件参数反应

Question

我在 Svelte 中编写了一个模态组件，它有多个用于控制行为的导出变量。这些变量的值可能因调用而异，但是一旦显示模式，唯一可以预期更改的值是 isOpen 的值。这表明 isOpen 是唯一需要反应性的变量，但如果我的理解是正确的， HTML 中其他变量的存在将导致 Svelte 不必要地为所有这些变量生成反应性代码，不必要地增肥代码库。

我的问题是，有什么策略可以防止在不需要时为组件参数生成响应式代码？

下面message不会随着模态显示而改变，所以好像只有isOpen需要reactive。不过，Svelte 编译器不知道这一点，所以我必须明确地做一些事情来抑制这种反应行为。

<script lang="ts">
  import { closeModal } from 'svelte-modals';

  export let isOpen: boolean;
  export let message: string;
</script>

{#if isOpen}
  <div class="contents">
    <p>{message}</p>
    <button on:click={closeModal}>OK</button>
  </div>
{/if}

我知道的唯一技巧是move the variable out into a function，如下：

<script lang="ts">
  import { closeModal } from 'svelte-modals';

  export let isOpen: boolean;
  export let message: string;
  
  const getMessage = () => message;
</script>

{#if isOpen}
  <div class="contents">
    <p>{getMessage()}</p>
    <button on:click={closeModal}>OK</button>
  </div>
{/if}

是否有更简洁或更常规的方法来完成此操作？对于像 Svelte 这样经过深思熟虑的技术，我发现自己相信必须有一种不那么笨拙的方法来做到这一点。在我之后来维护代码的人可能会认为这是不必要的冗长并消除了间接性，不知不觉地增加了代码库（他们应该这样做批发）。似乎应该有更明确的东西。

或者也许有一种方法可以要求显式指定 all 个反应变量，例如前面的 $:?

Answer 1

您可以在初始化组件时将消息分配给局部变量。

<script>
    export let message;
    export let isOpen =true;
    const originalMessage=message;
</script>

<div>
    Message: {originalMessage}
</div>
<div>
    isOpen: {isOpen}
</div>

防止 Svelte 组件参数反应

Preventing Svelte component parameter reactivity

svelte

reactive-variable