Небольшой лайфхак с лайфсайклом

В чате недавно напомнили о небольшом трюке, который почему-то часто ускользает из вида и кажется неочевидным

Наверное вы периодически могли видеть что-то подобное

const onScroll = () => { /* ... */ }
onMounted(() => {
  window.addEventListener('scroll', onScroll)
})
onUnmounted(() => {
  window.removeEventListener('scroll', onMounted)
})

И данный код кажется слегка изыточным, а порой это бывает и с запросами и тд. И есть ощущение что немного лишнего вываливается в общий скоуп компонента. Однако можно сделать код чуть более семантичным и собранным:

onMounted(() => {
  const onScroll = () => { /* ... */ }
  window.addEventListener('scroll', onScroll)
  onUnmounted(() => {
    window.removeEventListener('scroll', onScroll)
  })
})

Да. Теперь связанные сущности чуть лучше упакованы и да это работает. А если у вас несколько листенеров (такое бывает при обработке форм в ручную или D'n'D) можно доработать до

onMounted(() => {
  controller = new AbortController();
  window.addEventListener('scroll',  () => { /* ... */ }, { signal: controller.signal })
  window.addEventListener('resize',  () => { /* ... */ }. { signal: controller.signal })
  window.addEventListener('click',  () => { /* ... */ }. { signal: controller.signal })
  onUnmounted(() => {
    controller.abort()
  })
})

это позволит вам разом отключать всех подписчиков разом без нужды давать каждому отдельное имя (работает и с запросами и прочими браузерными API)

Надеюсь это поможет сделать вашу кодовую базу чуточку лучше

#лайфхак #composition

Расширение для Vue переименовывают... опять. Теперь это "Vue.js". Как выяснилось причиной по которой только сейчас взяли это имя... им просто не приходило в голову это раньше. А Volar изначально был проектом Джонсона и был назван так в честь любимой песни.

PS. Что именно это за песня сходу найти не смог (вариантов хватает)

Вновь любопытная статистика о vue/langauge-tools. Да, в него входит и расширение Vue.js

Заметен тренд на резкое снижение количества заведенных проблем на гитхабе и насколько оно было огромным при переходе на Volar с новой архитектурой. Все еще далеко от идеала, но стало явно гораздо стабильнее.

Ссылка со скрина

У меня 2 новости. Обе хорошие. Сейчас сообщу первую, а вечером вторую (вы уже даже догадываетесь о чем речь)

1. У Vue чата отделили старый Vuejs jobs от нашей сетки, так как мнения администраций частенько не совпадали. Теперь у самого крупного русскоговорящего чата Vue свой чат по поиску работы Vuejs Career. С более щадящей и мягкой модерацией (без банов за выход / ограничений зп в 150к и тп). Также администраций будет единой с чатом Vuejs, так что договариваться будет проще в случае возникновения проблем.

Закидывайте рефералки / вакансии / резюмешки и мы будем надеяться, что это поможет одним успешно находить работу, а другим искать сотрудников. Модерация вакансий и требований может еще какой-то период дорабатываться и проясняться. Поэтому не бойтесь предлагать идеи.

PS. В честь этого также провели небольшой ребрендинг сообщества (сменили лого), так что не пугайтесь

Запоздалая хорошая новость

Новость с информацией о интенсиве была уже выше. С чем связано запаздывание: в момент когда я собирался все запускать прилетело 2 крупных проекта горящих и я все еще не знаю как это все дело буду разруливать. Но вас кидать пообещавши тоже не хочется.

Критические даты: 7-11 сентября. 25-30 сентября, они связаны с работой и конференциями, те пересечение с этими датами = пауза в интенсиве.

И тут я встал на развилке. Спокойно все сделать 2 проекта и уносить интенсив на октябрь. Но по ощущениям ждать этого вам придется достаточно долго. Либо же в судорожном порядке попытаться жонглировать сразу 6 активностями при этом мне нужно еще и фуллтайм работать. И в этом случае я не знаю как обеспечить качество интенсива и не выгореть на половине пути.

Хотелось бы услышать ваше мнение. Если мы остаемся на ближайшем времени, то интенсив начнется со следующей недели. Если готовы терпеть, то на октябрь.

Самому крайне неловко и жаль, что все это произошло так внезапно... Сижу и думаю как правильно все разрулить теперь (да буквально в 1 день пришли 2 проекта и аппрув выступления на конфу, даже не думал что такое бывает).

Радует лишь 1: делаю я интенсив бесплатно и мне не стыдно за взятые с других деньги (но стыдна мысль об откладывание того о чем все долго ждали и просили)

Так ребят, интенсив уезжает на октябрь. Но не расстраиваемся. Я немного перетер с Эваном, мол так и сяк "ребята ждали, бросать нельзя".

И вот ловите подгончики: Free Weekend от certificates.dev: уже в эти выходные!
И даже новый бесплатный курс по Vue от Scrimba в результате партнерства со Vue: появился только сегодня!

В целом, кто хочет, тот найдет себе источники для изучения.
PS. Насколько я знаю что certificates.dev что scrimba это свежак по такому формату, поэтому отзывы приветствуются!
PPS. Специально для душнил: конечно про общение с Эваном я пошутил, но совпадение все еще веселое

не мутируйте вычисляемое!

Daily reminder: неосторожное использование sort/splice/reverse может привести к зависанию на странице, которое при этом не всегда легко обнаружить.
Поэтому, никогда не используйте sort/splice/reverse с реактивными данными внутри computed/template/watchEffect. Оно может привести к зависанию приложения и чаще всего вы и не хотели что-то мутировать, а просто подзабыли о том как работают данные функции.

1) Используйте немутирующие методы(toSpliced/toSorted/toReversed), если вам и не нужна мутация, а, например, только для отображения
2) Используйте их на нереактивных сущностях, если вам это необходимо

Зато, если вы обнаружите баг с бесконечными ререндерами, это доп пунктик, что вы можете проверить

#советы