如何阻止Svelte为无需响应式的组件参数生成响应式代码

可选优化方案 #

1. 局部常量赋值（Svelte 3/4 最直观的方案） #

你不需要额外封装函数，只需要把不需要响应式的 prop 赋值给一个局部 const 常量，模板中仅引用这个局部常量即可。Svelte 不会为没有在模板中直接引用的导出变量生成响应式更新逻辑，这个方案可读性极强，只要加简单注释就不会被后续维护者误删：

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

  export let isOpen: boolean;
  export let message: string;

  // 静态常量，仅初始化赋值一次，无需响应式更新
  const staticMessage = message;
</script>

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

2. Svelte 5 Runes 显式声明响应式（最符合长期规范的方案） #

Svelte 5 推出的 Runes 特性完全解决了默认隐式响应式的问题：所有变量默认都是非响应式的，只有显式用 $state、$props 等 Rune 标记的变量才会生成响应式代码，不需要任何间接层，逻辑完全透明：

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

  // 显式声明为响应式属性
  let isOpen = $state<boolean>(false);
  // 普通属性，无响应式能力，仅初始化时接收传入值
  let message = $props<string>();
</script>

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

关于强制显式声明响应式的配置 #

Svelte 3 和 4 没有提供全局配置开关来关闭默认隐式响应式，但Svelte 5的Runes模式就是完全的显式响应式设计，和你要求的「必须显式标记才生成响应式代码」的规则完全一致，升级到Svelte 5并开启Runes模式即可满足需求。

额外提示 #

Svelte为单个prop生成的响应式代码体积非常小，如果你的组件不会被批量实例化上千次，这类优化带来的体积收益几乎可以忽略，不需要为了极小的收益牺牲代码可读性。

内容的提问来源于stack exchange，提问作者Joe Lapp