在Svelte的响应式系统中，声明的响应式变量会默认跟随依赖的变化自动更新，当我们需要某个变量在首次满足特定条件时完成赋值，之后不再响应后续的变化，就需要特殊处理响应式逻辑，避免不必要的更新。
常规响应式赋值的问题
首先看直接使用响应式变量赋值的场景，假设我们有一个响应式变量count，需要在它第一次大于5的时候，把值赋给target，之后count再变化，target也不再更新。
如果直接写下面的代码，会发现target会一直跟随count的变化更新：
import { writable } from 'svelte/store';
let count = writable(0);
let target;
// 错误的响应式赋值方式
$: if ($count > 5) {
target = $count;
}
这是因为$:声明的响应式语句会在依赖的$count每次变化时重新执行，只要$count大于5，就会不断给target赋值，不符合我们的需求。
方案一：使用普通变量标记赋值状态
最直观的思路是用一个普通变量标记是否已经完成过赋值，只有未赋值的时候才执行赋值操作，赋值后修改标记，后续不再进入赋值逻辑。
import { writable } from 'svelte/store';
let count = writable(0);
let target;
// 标记是否已经完成首次赋值
let hasAssigned = false;
$: if ($count > 5 && !hasAssigned) {
target = $count;
hasAssigned = true;
}
这种方案逻辑简单，适合简单的场景，缺点是多了一个额外的标记变量，如果这类需求较多，会增加状态管理的复杂度。
方案二：使用非响应式变量存储结果
我们可以把需要停止响应的变量声明为非响应式变量，只在首次条件满足时赋值，后续不再处理响应式更新。
import { writable } from 'svelte/store';
let count = writable(0);
// 声明为非响应式变量，不会自动跟随更新
let target = null;
$: {
// 只有target为null且count大于5的时候才赋值
if (target === null && $count > 5) {
target = $count;
}
}
这里利用target初始值为null的特性，判断是否已经赋值，赋值时直接修改普通变量，后续$count变化也不会再修改target，不需要额外的标记变量。
方案三：自定义响应式控制逻辑
如果需要更通用的逻辑，可以封装一个自定义的函数，用来处理首次条件满足时的赋值，并且自动停止后续的响应式更新。
import { writable } from 'svelte/store';
/**
* 首次条件满足时赋值并停止响应的工具函数
* @param {import('svelte/store').Writable} sourceStore 源响应式store
* @param {Function} condition 条件判断函数
* @returns {any} 赋值后的结果
*/
function assignOnce(sourceStore, condition) {
let result = undefined;
let isDone = false;
// 订阅源store的变化
const unsubscribe = sourceStore.subscribe(value => {
if (!isDone && condition(value)) {
result = value;
isDone = true;
// 赋值完成后取消订阅，避免后续更新
unsubscribe();
}
});
return result;
}
let count = writable(0);
// 调用工具函数，条件为count大于5
let target = assignOnce(count, val => val > 5);
这种方案通过订阅store的变化，在条件满足后取消订阅，从根源上停止了响应式的更新，适合需要复用的场景，逻辑也更清晰。
不同方案的适用场景
我们可以根据实际需求选择不同的方案：
- 简单的一次性赋值场景，优先选择方案二，代码简洁无额外变量
- 需要多个同类逻辑的场景，选择方案三的封装函数，减少重复代码
- 逻辑复杂需要额外标记状态的场景，可以选择方案一，逻辑更直观
需要注意的是，如果使用的是Svelte的组件内响应式变量而非store，逻辑是类似的，只需要把$store的写法替换成对应的响应式变量即可，核心思路都是控制赋值逻辑只执行一次，或者停止后续的响应式更新。