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

[Version]

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

[lonelygoblin]

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

[depechie]

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

[tiger31]

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

[malek2033]

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

[sainty]

и поэтому я до сих пор на options api и не чешусь. composition продали как спасение, а по факту поменяли this на .value, баги те же, только в профиль

[sabaza]

@tiger31, reactive хорош ровно до момента когда надо заменить объект целиком. пишешь state = newState и реактивность отвалилась молча, ни ошибки, ни ворнинга, сиди гадай почему шаблон не обновляется. имхо это хуже забытого .value, тот хоть линтером ловится за минуту. поэтому у меня ref везде, единообразие дороже красоты

[juniorstack]

@malek2033, только учти что деструктурированные пропсы из 3.5 нельзя просто так передать в композабл, реактивность теряется. надо оборачивать в () => count или toRef. то есть одну боль убрали, другую завезли, классика vue. но в шаблонах да, стало сильно чище