如何在 Svelte 中跨多行进行反应性分配？

Question

在 Svelte 中，通常会分配从某些 props 或 state 反应计算的变量，如下所示：

    export let x: number
    export let y: number
    $: sum = x + y

当我的反应比 x + y 复杂得多时，它的多行形式是什么样的？

Answer 1

这个的扩展版本是

$: if (valesChanged) {
    // do whatever you want
}

条件可以是一个或多个无功值的变化。

如果所有道具有任何变化，或者更优雅的解决方案

$: if($$props) {
    console.log($$props)
}

Answer 2

我总是建议将稍微复杂（或更糟，显然）的操作放入其自身的函数中，然后使用您希望操作对其做出反应的变量调用该函数。它将提高可读性和可重用性并阐明意图。

我也鼓励尽可能使这些函数成为纯函数（即没有副作用），但这并不总是可能的。

例如，与其拥有这样的东西：

$: {
    ...multi-line complex operation on x and y setting value z...
}

我会这样做：

function complexOperation(a, b) {
  ...multi-line complex operation on a and b setting value c...
  return c
}

$: z = complexOperation(x, y)

我尽量将我所有的反应性陈述都放在一行中，否则我将它们移到它们自己的函数中，但我理解这是个人偏好。

How to do a reactive assignment across multiple lines in Svelte?