#svelte
#стройная
Вопрос:
В Svelte принято назначать переменные, которые реактивно вычисляются из некоторых реквизитов или состояний, например:
export let x: number export let y: number $: sum = x y Как выглядит многострочная форма этого, когда у меня реакция значительно сложнее, чем x y ?
Ответ №1:
Я всегда буду рекомендовать поместить слегка сложную операцию (или, что еще хуже, очевидно) в отдельную функцию, а затем вызвать эту функцию с переменными, на которые вы хотите, чтобы операция реагировала. Это улучшит читабельность и возможность повторного использования, а также прояснит намерения.
Я бы также рекомендовал делать эти функции чистыми всякий раз, когда вы можете (т. Е. Без побочных эффектов), но это не всегда возможно.
Так, например, вместо того, чтобы иметь что-то подобное:
$: { ...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) Я стараюсь, чтобы все мои реактивные высказывания были однострочными, в противном случае я перемещаю их в собственные функции, но я понимаю, что это личные предпочтения.
Комментарии:
1. Спасибо! В итоге я в основном выполнял их как анонимные вызовы функций, например
$: pattern = ((allPatterns) =gt; { return allPatterns.find(p =gt; p.id === patternId) })(allPatterns). Это не совсем так хорошо, как реактивные геттеры в Vue или Mobx, но я думаю, что это нормально.2. Не за что! Хотя в приведенном вами примере анонимная функция не нужна, вы могли бы просто сделать
$: pattern = allPatterns.find(p =gt; p.id === patternId)то, что я думаю, понятнее?3. Да, извините, плохой пример; Я имею в виду специально для случая, когда требуется несколько утверждений.
Ответ №2:
Расширенная версия этого
$: if (valesChanged) { // do whatever you want } И условием может быть изменение одного или нескольких реактивных значений.
или более элегантное решение, если есть какие-либо изменения во всех реквизитах
$: if($props) { console.log($props) }