- 响应式数据定义优化：
- 精细化定义响应式数据：
- 避免定义不必要的响应式数据。例如，如果某个数据仅在组件初始化时使用，且后续不会改变其值从而影响组件视图，就不要将其定义为响应式。在 Svelte 中，使用
let 而非 $: 来声明此类变量。比如：
<script>
// 非响应式变量，仅初始化使用
let initialValue = 10;
// 响应式变量，会触发组件更新
$: reactiveValue = 20;
</script>
- 合理分组响应式数据：
- 将相关联且会同时发生变化的响应式数据组合在一起。这样，当其中一个数据变化时，Svelte 可以更高效地批量处理更新，而不是多次触发不必要的更新。例如，如果一个组件展示用户信息，包含姓名、年龄和地址，可将这些信息封装在一个对象中并定义为响应式：
<script>
$: user = {
name: 'John',
age: 30,
address: '123 Main St'
};
function updateUser() {
user.name = 'Jane';
user.age = 31;
// 此时由于是对同一个响应式对象操作，Svelte 会更高效处理更新
}
</script>
- 响应式数据使用优化：
- 减少响应式数据的依赖：
- 在计算属性或函数中，尽量减少对响应式数据的依赖。因为每一个依赖的响应式数据变化都会触发相关计算的重新执行。例如，如果有一个计算属性用于展示用户全名，且只依赖
firstName 和 lastName，就不要在计算过程中引入其他不必要的响应式数据：
<script>
$: firstName = 'John';
$: lastName = 'Doe';
// 不依赖其他无关响应式数据
$: fullName = `${firstName} ${lastName}`;
</script>
- 控制响应式语句的位置：
- 将
$: 语句放在合适的位置，避免在循环或频繁调用的函数内部定义新的响应式变量或触发响应式更新。例如，不要在 each 块内部定义复杂的响应式计算，因为每次数组项变化时，内部响应式计算都会重新执行。可以将复杂计算提取到外部：
<script>
const items = [1, 2, 3];
// 提取响应式计算到外部
$: total = items.reduce((acc, item) => acc + item, 0);
</script>
{#each items as item}
{item}
{/each}
<p>Total: {total}</p>
- 组件更新策略优化：
- 使用
{#if} 条件渲染：
- 对于不经常显示且更新频繁的部分，使用
{#if} 进行条件渲染。当条件为 false 时，该部分组件及其内部的响应式更新都不会被触发，从而提升性能。例如，一个组件有一个高级设置面板，用户很少打开：
<script>
let showAdvancedSettings = false;
</script>
<button on:click={() => showAdvancedSettings =!showAdvancedSettings}>Toggle Advanced Settings</button>
{#if showAdvancedSettings}
<div>
<!-- 高级设置内容，更新频繁但不常显示 -->
</div>
{/if}
key 属性的正确使用：
- 在
each 块中，为每个列表项设置唯一的 key。这有助于 Svelte 更准确地识别哪些项发生了变化，从而只更新实际改变的项，而不是重新渲染整个列表。例如：
<script>
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
];
</script>
{#each users as user}
<div key={user.id}>{user.name}</div>
{/each}
- 组件拆分：
- 将大型组件拆分为多个小型组件，每个小型组件只负责处理特定的功能和响应式数据。这样可以减少单个组件的更新范围，使得更新更局部化，从而提升整体性能。例如，将一个包含用户信息展示、编辑和删除功能的大型组件，拆分为
UserInfoDisplay、UserInfoEdit 和 UserInfoDelete 三个组件。
