Почему debouncedWatch в примере?

Question

[Rooly]

Здравствуйте. Поддерживаю ядро проекта, уже много говна (на мой лично взгляд, может я говно делаю) перебрал, но это совсем меня завело в тупик. Кто пользовался vueuse объясните мне, может дураку, который уже весь гугл перечитал. не понимающему что здесь происходит?

В общих чертах: В коде идет работа с chips от vuetify.

debouncedWatch([() => props.filters, () => state.chips], () => {
      selectedFilters.value = reduce(
        props.filters,
        (result, value, key) => {
          if (value && state.chips[key]) result.push(key);
          return result;
        },
        [],
      );
    });

_.debounce обычно в лодаше используется, когда нужна задержка. Здесь же нету задержки.
Также здесь массив из двух как бы function expression , что тоже очень непонятно для меня.
Прошу хоть как-то разжевать, реально уже сил нету

Answer 1

[Alex]

Также здесь массив из двух как бы function expression

Это позволяет реагировать на изменения в двух пропсах а не только в одном

Насколько я понимаю, этот debouncedWatch можно в вашем случае имело заменить на обычный watch.

debouncedWatch должен принимать вторым аргументом параметры с задержкой. У вас такого нет. А судя по исходникам, значение задержки по умолчанию = 0

Comments

[Rooly]

Огромное спасибо, подтвердили мои сомнения.
Можно уточню, если получается хотя бы в одном пропсе что-то изменится вызовется callback?
Видел такие конструкции везде в виде function expression () => props.value, в данном случае можно было бы просто debouncedWatch([props.filters, state.chips]) или здесь этот function expression несет какую-то смысловую нагрузку?

[Alex]

Rooly, https://newbedev.com/how-to-watch-props-change-wit...

[Rooly]

Alex,
Очень интересная статья про toRefs.
Нету однозначного ответа на мои вопросы про " если получается хотя бы в одном пропсе что-то изменится вызовется callback?". Про второй вопрос по поводу смысловой нагрузки я понял, что если reactive({}), то лучше передавать как () => props.object, чтобы типо getter брался, но как-то размазано. Очень хотелось бы, чтобы пояснили хоть на один из моих сейчасшних вопросов.
Огромное спасибо за ресурс и статью, на самом деле полезный и интересный материал.

[Rooly]

Alex, Так, еще раз спасибо за ту статью разобрался на примере. Кому может поможет https://codepen.io/rasank/pen/VwMBoKW.
P.S. Не смог полноценно настроить vue в кодепене