#2 Реактивность - Vue.js: концепции
ฝัง
- เผยแพร่เมื่อ 24 ก.ย. 2024
- Что мы вкладываем в понятие "реактивность"? И почему React не реактивен, а Vue.js реактивен
А реактивен ли Angular? ;)
Вопросы? Пожелания? Мысли о курсе? Присоединяйтесь к телеграм-каналу нашего сообщества t.me/vuejs_club
---
Видео создано благодаря подписчикам проекта на нашем Patreon.
Хотите получать контент на 3 месяца раньше остальных? Присоединяйтесь! / javascriptninja
Ссылку на этот курс я завтра же запостаю в свои каналы, очень полезно даже тем, кто на реакте или ангуляре пишет, для понимания полной картины.
Вы с Ильёй лучшие из лучших
По мне так очень правильно, что начинаешь с объяснения концепций. Просто показывать написания кода, без объяснения концепций, действительно тупиковый путь. Потом выходит что пишу то не знаю что! Спасибо тебе!
Давно не встречал такого качественного контента по вью и особенно такого грамотного преподавателя, спасибо огромное.
Эх, жаль, что Илья не создал ничего такого классного про Ангуляр!)) Спасибо, Илья за правильный подход в обучении, а не "сразу в бой"!!!
100%. Тоже бы про ангуляр хотел)
Он не осилит angular.
Благодаря этому человеку я понял, что я задаю себе правильные вопросы, а в его курсе получаю на них ответы! Это Amazing! Спасибо!
В картинках)) замечательная идея. Вы делаете большое дело.
Огромное Вам спасибо за курс. В разы лучше объясняете чем большинство платных курсов
Я просто хочу сказать спасибо. Я НИКОГДА не могла учиться по видео, всегда для меня это мучение. Но ты делаешь этот визуальный контент так увлекательно и так понятно рассказываешь, что видео пролетают незаметно, и, главное, всё понятно. Еще лучше то, что я как раз хорошо умею работать с React, но сейчас по работе мне нужно научиться работать на Vue. И эти аналогии в твоих видео для меня - просто сказка. Спасибо тебе огромное!
Спасибо за толковые разъяснения.
Спасибо! Интересная информация, особенно новичкам, те кто не работал со старыми технологиями трудно оценить всю прелесть реактивности, фактически Vue и React можно сравнить как Rust и C++ в принципах управления памятью, где первый берёт эту задачу на себя, автоматизируя процесс, но жестко декларирующий условия, в то время как второй подразумевает ручное управление памятью.
React отлично справляется с автоматической синхронизацией данных и интерфейса, просто через другой механизм.
В данном контексте было бы уместней сравнить Vue с jQuery. В последней действительно необходимо вручную управлять DOM'ом, отсутствует синхронизация данных и представления.
Интересно с тобой подискутировать на эту тему.
Ты говоришь: ‘реактивность - это способность обновить интерфейс при изменении данных’. При этом реакт не является реактивным потому что мы меняем данные через специальную функцию setState.
С моей точки зрения важно не то как ты меняешь данные, а то от чего ты избавляешься: а избавляешься от необходимости вручную вызывать методы которые перерисовывают интерфейс.
И ангуляр и реакт и вью добавляют как раз этот уровень абстракции почему мы их и юзаем.
Это лучший канал из тех, что я встречал
дуже дякую, матеріал супер корисний!
Обьясняет как боженька просто))
Поддержу комментом и лайком. Спасибо за труды Илья
Спасибо за Ваш труд
Автор хороооош!!! Подача - диаманд. Очень! Молодец!
Очень качественный контент, ты мастер объяснений !
кратко и по делу. Спасибо.
Первое что приходит в голову - производительность и непротиворечивость. Если на странице дофига данных, то эффективнее их в один заход перерендерить, а не каждый блочок по-отдельности рендерить.
А нормально рассказываете, что так мало просмотров
очень познавательно! Vue framework , frontend
погружение началось)
В мире бекенда всё прекрасно! Пошли пацаны в бекенд! 😁😁
Очень интересно, подача класс!
Спасибо за информацию.
Молодец! Спасибо за труд!)
Испытал наслаждение от того, что Vue сам по себе реактивный
Большое спасибо!
Спасибо. Очень доходчиво.
Огонь 🔥 подача.
Реактивность - способность фреймворка реагировать на изменения данных.
спасибо за видео=)) лайк однозначно=))
Есть одно но, нельзя присваивать напрямую например элемент массива (arr[1] = 2, реактивность не отработает). Т.е. нужно об этом тоже не забыть сказать. Т.к. не все может vue отследить, не потому что он плох, а потому что просто такая среда разработки
Нельзя во Vue2
@@JavaScriptNinja Спасибо, обязательно попробую в 3 vue. Если правда, это вообще огонь!
Лучший 🔥
super
Спасибо!
Илья из видео#0: "Плохо, когда программист может решать задачи как ему вздумается, это приводит к росту объёма специфического, "проектного", кода"
Илья из видео #2: " Во Vue можно менять данные как угодно, и это круто".
Да, здесь нет противоречия, потому что возможность менять данные присваиваниями - конструктивная возможность языка. Вью просто "стоит в сторонке" не отсвечивая. Грубо говоря нам при изменении данных не надо думать что есть кто-то ещё (вью)
@@JavaScriptNinja я о другом. Может просто прозвучало так, что в реакте - фу, надо всякий setState вызывать, а во Vue - круто, можно данные менять как угодно. И я указал на то, что это противоречит одной из задач, которую должен решать фреймворк (из видео #0): уменьшать количество специфичного кода, решая типичные задачи стандартными методами. Ведь сразу можно накидать десяток паттернов, как "правильно" менять данные во Vue.
@@ИмяФамилия-э4ф7в они будут того же уровня как и в реакте :) там тоже с десяток
У меня просьба добавлять в сравнение ангуляр
просто ангуляр сложнее добавлять в качестве примере с вью) было бы слишком затратно, да и возможно Илья плотно не работал с ангуляром
Илья достаточно плотно работал с Ангуляром во времена Ангуляр 4, с тех пор концептуально ничего не поменялось
@@JavaScriptNinja Я так понял Илья работал со всеми фреймворками) приношу свои извинения)
Мне почемуто всегда думалось, что реакт это оптимизированная работа с dom и различными обновлениями для рендеринга.
Никогда не читал про реакт, но по названию почемуто так себе это представлял.
Ну так и есть
В світі бекенду усе просто у них є код і він працює, усе історія закінчена. :)
Подскажите, пожалуйста, где можно прочитать про механизм транспайлинга Proxy в Vue для старых браузеров?
Его нету и не будет
Супер! ну реакт теперь для меня мертв) Если раньше я себе думал "блин если закроют проект то можно будет свичнуться на реакт", то теперь я свичнусь в фирму где смогу спокойно писать на вью))
Я не очень люблю такой радикализм :)
@@JavaScriptNinja да, я просто в состоянии аффекта))
@@olezhonnv3215 скорее умрешь ты, чем TS. TS - единственное в экосистеме js, что не стыдно использовать.
Казалось бы, reactивность стоит ожидать от реакта. Там какая-то своя реактивность или ее там нет?
Своя не реактивность, на этом канале можно 7уроков по реакт посмотреть, там Илья и его коллеги все рассказал, очень интересные уроки, рекомендую 🤓
@@grommaks спасибо, обязательно посмотрю
Нет, реакт не реактивный, в нем всегда необходимо явно самостоятельно вызывать изменение состояния)
@@volodymyrklimov2560 в голом реакте если только
Ну это же не совсем правда. Да чтобы поменять стейт нужно явно вызвать метод, но у компонента в реакт стейт не является необходимым, он может просто рендерить что-то на основе своих пропсов. А на изменения полпсов компоненты реагируют сами, так ведь ?
👍
Вау
Сударь, а где третья часть? 4ая есть, 2ая есть
Плюсы в сторону vue.js всегда звучат для меня скорее как большие минусы. Уж лучше только setState , чем компонент на vue.js , принимающий данные "в любые щели". Vue.js больше багов плодить помогает , чем задачи решать
У любого компонента Vue можно задать типы его свойств и предсказуемо с ними работать
Понимаю вашу точку зрения, но не разделяю её. Баги Вью и Реакта отличны и различны :)
Согласен. Вообще, экосистема js - это один сплошной баг, так как большинство библиотек написаны необразованными школьниками и вкатывальщиками. Из-за этого энтропия системы всегда выше, чем на любом другом языке.
setState...... Так вот откуда эта дичь во Flutter.
Реакт вообще не знаю, а вью знаю основы и понимаю удобство. Но начав изучать flutter, вообще не понял прикола, ну зачем во первых создавать динамический виджет, а потом еще обновлять его путем setState....
Даже в каком нибудь c# и то просто и логично. В любое время просто пишешь text1.text = '12345'; И все обновляется, без каких либо дополнительных вызовов.
Так react не реактивный?
Получается что так) на этом канале плейлист по реакту имеет пояснение почему не реактивен
Проблема обновления ui при изменении данных это проблема для приложения на js в браузере? Я правильно понял мысль ? Значит язык и среда выполнения прежде всего основные препятствия. На десктопных приложениях нет же таких проблем.
Нет, не правильно понял - все не так. Проблем здесь никаких нет, есть особенности. В переводе на десктопные приложения будет выглядеть примерно так: можно получить такую реактивность из коробки пользуясь gui библиотеками (qt,gtk, wxwidgets), а можно вручную на голом winapi делать синхронизацию данных модели и ui компонента. Это примерно как коробки передач на автомобилях сравнивать.
дык браузер изначально не предназначался для интерактивных приложений
это потом прилепили яваскрипт, который был слеплен на коленке
потом стали клепать приложения в браузере, который для этого не предназначен
отсюда весь этот гимор с обновлением и перерисовкой хтмл
надо быть полным идиотом, чтобы использовать человеческие слова для описания гуя и еще большим идиотом, чтобы перерисовывать хтмл при всяких обновлениях
поэтому в десктопе ты легко меняеш состояние контрола и получаеш от него события и обрабатываеш их, а вот в вебе это делается через костыли на квадратных колесах
с разным уровнем квадратности этих колес
Забавно. Я в бэкэнде всегда под реактивностью понимал, что это неблокирующее потоки ядро, построенное на асинхронных callback- функциях. Тем самым позволяющее обрабатывать большое количество параллельных запросов малым количеством потоков (threads).
Есть тут какая-то аналогия с реактивностью в UI? Или у меня неверное понимание?
Я бы это назвал асинхронностью, а не реактивностью
внезапно это не так
что называют в вебе реактивностью - это как бы термин чисто вебовский
скажем мигать 3мя светодиодами на контроллере с разной частотой и промежутками - это асинхронность
используется системный таймер и от него делаются производные таймеры софтового уровня, которые и вызывают коллбеки с миганием светодиодов
казалось бы очевидная вещь в мире системного софта, но в вебе это подается как очень крутая штука
не так давно я нашел фреймворк на пхп, который называется реакт пхп
случайно нашел, т.к. искал библиотеку пхп для работы с модбас (такой вот я извращенец)
и она таки есть и есть пример использования ее совместно с реактом или каким-то подобным фреймворком
оказывается на 7м пхп уже можно писать такие скрипты, которые запускаются из консоли и работают как постоянное приложение-демон
а ведь пхп это одноразово исполняемый файл
так вот, суть такова, что там тоже есть суперцикл бесконечный и в нем есть 2 функции как в яваскрипте, которые реализуют софтовые таймеры и вызывают коллбеки
все это завернуто в красивые обертки и называется фреймворком
я когда понял это, то у меня случился истерический хохот
На скорости 1.5 смотреть можно
под еду тож норм заходит
Ну так у каждого свой темп речи ) Кого-то на 0.7 только можно слушать )))
и как он это делает? как он мониторит модель?
я тоже могу сделать такой мув через консоль в реакте с использованием valtio - это будет реактивность?
Да, но зачем?
нашел курс про react у Самурая
теперь vue у Ниндзя
остался angular)
а что за Самурай?))
@@ИринаКорчагина-к7к напиши на поиск реакт самурай)
А где же ниндзя код😮?
Поставил минус, это не ответ на собеседовании. Почему не рассказали как это все работает под капотом? Я имею ввиду get и set во vue
th-cam.com/video/u_akJ958SVY/w-d-xo.html - этот парень рассказал лучше
про это есть отдельное видео в курсе th-cam.com/video/tt6VERYoBwE/w-d-xo.html
потому что в начале я предпочитаю рассказывать "что", потом "зачем" и только потом "как это работает"
лгтб стрелочка=)
И тут я осознал МЕГАБАГ youtube .. Максимальное ускорение 2x для этих видео мало. Необходимо 3,75 -5,25
ставь расширение video speed controller. спасает везде, а не только на ютубе
3:23 ещё один курс для тех кто уже всё знает? Спасибо.
как по мне бесполезная вещь какая-то, тем более можно самому в 2 строки реализовать
MyReactiveComponentClass {
get count() { return this.state.count; }
set count(v) { this.setState({count: v}); }
}
по сути, просто деталь реализации, лично мне нет разницы вызывать функцию или просто присваивать значение
В реальном проекте так никто писать не будет. Реакт не является реактивной библиотекой в любом случае
реакт не реактивный)
за лгбт ручку отдельный лайк
кайфовая
Это игровая ручка - с подсветкой)))
Как это реакт не реактивный? Ты когда данные через пропсы передаешь, всё прекрасно само меняется ,от главного компонента до самого вложенного. Также во vue ты не можешь обьявить эти данные абы где, к примеру при обьявление данных в конструкторе vue не повесит вотчер на них
А вот так. Откуда берутся изменения данных в пропсах? Кто-то где-то наверху сделал setState :)
Или ReactDOM.render передал новые пропсы - в любом случае это изменение инициировано ВЫЗОВОМ функции Реакта.
Что же касается Вью - то что у нас есть возможность создавать нереактивные данные не отменяет реактивности фреймворка
@@JavaScriptNinja
Я так и не понял пример с преимуществами .
чем
data = newData
лучше
setState(newData)
тем что в глубинах vue отрабатывает сеттер? такое себе
@@ДмитрийГоловенчик тем что вам не надо вызывать какой-то метод. Вы (и что самое ценное - код, который возможно написали не вы) меняете поле - и вуаля, экран обновлен.
В случае же с реактом если вы или код обновили данные, но не вызывали сет Стейт - все
@@JavaScriptNinja ну данные и так и так нужно присваивать через равно или через метод. Я если честно не совсем понимаю что вы имеете ввиду, когда говорите что данные обновятся как-то отдельно от состояния, например кодом который написал кто-то другой. Я наверное не до конца понял. Но как я вижу, откуда бы не пришли данные, вам нужно будет или присвоить в data либо вызвать метод обновления стейта.
Если не сложно, приведите пример или ссылку на код или доку, где можно посмотреть что data обновляется самостоятельно без прямого присваивания.
@@ДмитрийГоловенчик присваивание - это конструкция языка, не фреймворка. setState - конструкция фреймворка. Как следствие любой код может работать с присваиванием, а с setState - только тот который в курсе о существовании react
Какой же бред. Из тебя такой же backend'er как из домохозяйки сварщик. Да и что это за подача такая? Как можно говорить об элементарщине с таким пафосом?