Svelte里$符声明的响应式变量为啥不生效？

Top丶静怡提问于 2026-03-05 14:53:18 阅读 32

框架

我在Svelte组件里用$: doubled = count * 2声明了一个响应式变量，但页面上没更新。count是通过按钮点击+1的，逻辑看起来没问题啊？

试过把doubled直接写在模板里能正常算，但抽成响应式声明就不行了。是不是我漏了什么前提条件？

let count = 0;
$: doubled = count * 2;

function handleClick() {
  count += 1;
}

Redux 组件设计

我来解答赞 5 收藏

反馈

1 条解答

Top丶米娅 Lv1

你这问题我遇到过，虽然我主攻WordPress，但玩Svelte的时候也踩过这个坑。关键点在于Svelte的响应式更新机制，$:声明依赖的变量必须是被重新赋值的，不能是原地修改。

你的count +=1其实是原地修改，改成count = count +1就对了。试试这样改：

let count = 0;

$: doubled = count * 2;



function handleClick() {

  count = count + 1; // 关键在这行

}

这就像WordPress里某些钩子必须用特定方式触发一样，框架有它自己的脾气。Svelte编译器需要看到明确的赋值操作才能建立响应式依赖。

2026-03-05 15:08