在 svelte 中，如何在变量更改时使用 `console.log('yes')`？

Posted 2023-02-19

【中文标题】在 svelte 中，如何在变量更改时使用 `console.log(\'yes\')`？

【英文标题】：In svelte, how to `console.log('yes')` when a variable changed?在 svelte 中，如何在变量更改时使用 `console.log('yes')`？

【发布时间】：2019-11-20 20:41:32

【问题描述】：

let c = 0;
$: console.log(c);

如果我们想在c的值改变时打印它，我们可以像上面这样写。

因为c在$指令中的字面意思是，所以这个语句可以对c做出反应。

但是当c 改变时我只想console.log('yes') 怎么办？

let c = 0;
$: console.log('yes');

显然，console.log('yes') 语句对c 没有反应。

另外，如果我还是 console.log(c) 而是把它放到一个函数中：

let c = 0;
function log() 
  console.log(c);

$: log();

log() 对c 也没有反应。

那么，如果响应式代码实际上不包含我想要响应的变量，我该怎么办？

【参考方案1】：

你可以这样做：

let c = 0;
$: if (c >= 0) 
    console.log("yes");

【讨论】：

将 c 从 1 更改为 0 不会记录日志...但这是关于 javascript 中的 false 值的另一个线程。

您的意图是在 $ 语句中逐字写入c，尽管它看起来很奇怪。是个变通办法，我们也可以写console.log('yes' || c)或者c; console.log('yes');，但是都丑……

我更新了我的答案以包括0。如果您需要，也可以调整此 if 语句以包含负值。

c; console.log('yes') 在我看来并不难看

【参考方案2】：

我最近一直在玩 svelte，需要在属性更改时调用一个函数。 在 Vue 中，您可以使用 watch，但我在 Svelte 中找不到等效项。 在我的项目中是这样的：

let c = 0;
$: if (c) 
    console.log("yes");

我不能 100% 确定这是否是正确的方法。 希望 Rich Harris 能如我想知道的那样插话。

【讨论】：

我在 Twitter 上有 @Rich_Harris，如果他回复，我会在这里同步。

您可以使用较短的语法，例如$: c ? console.log(yes):null;

【参考方案3】：

我在推特上问过，答案是：

话题链接：https://twitter.com/liyuanqiu/status/1149235193296773122

【讨论】：

感谢您回来提供答案，盯着这个以供将来参考。我真的希望在苗条的文档中对此进行了概述。

哇，这是信息的金块。我不会猜到在$: 之后使用逗号分隔的语句，无论如何这对我来说是新的。就更新状态而言，这是一种有效/更好的操作方式，而不是每当您认为它可能会有所不同时就必须输入boo.far = boo.far（因为有时出于某种原因我不这样做，而其他时候我这样做 - 它仍然是有点神秘）？

这样做的一个大问题是它不会暴露以前的值，因此这将触发页面实例化以及用户触发的更新。

【参考方案4】：

最好的方法是使用一个函数来检测值何时发生变化，看看这个例子Variable watcher with svelte

【参考方案5】：

如果你只是在你想做的任何事情中使用不断变化的变量，它也可以工作：

let c
$: if (condition) console.log(c)