Vue: ref().value меня доконал, постоянно забываю .value и сижу дебажу пустоту

[olga_code]

Перешёл на vue 3 composition api, в целом норм, но это вечное .value в шаблоне не пишешь а в скрипте пишешь — я уже раз пять ловил баг что забыл .value и сравниваю объект ref с числом. Нормальные люди как с этим живут?

[ivan1999]

Живём с volar который подсвечивает забытый .value прямо в редакторе, и с привычкой. Ещё помогает reactive() для объектов где .value не нужен вообще. Через месяц перестаёшь замечать, честно.

[oleg_bit33]

Спасение от этого — реактивная деструктуризация через toRefs() или toReactive(). Если пишешь `const { count } = toRefs(state)`, то count уже ref и .value нужен только в скрипте, зато в шаблоне прозрачно. Но главный инсайт: eslint-plugin-vue с правилом vue/no-ref-as-operand ловит именно твой баг — сравнение ref-объекта с примитивом. Поставь и забудь про дебаг пустоты.

[alina_go40]

Есть ещё паттерн — использовать reactive() вместо ref() для сложных объектов и ref() только для примитивов. Тогда логика простая: скалярное значение — ref, объект — reactive, .value нужен только в первом случае. Когда начал так строго разделять, количество таких багов упало до нуля.

[egor_web99]

В Vue 3.5 завезли reactive props destructure — теперь можно делать `const { count = 0 } = defineProps()` и count реактивен без .value. Если ещё не смотрел в сторону 3.5, это один из главных QoL-апдейтов именно для этой боли.