#12 Реализация реактивности - Vue.js: нюансы

[@ekaterinakrutakova9781]

Это очень важное объяснение, к слову! Спасибо за контент 👍

[@ОлегСелин-ш9ы]

Вот такие тонкости очень сложно отлавливать. Спасибо огромное за разъяснение!

[@jackdrengr5069]

Спасибо Вам, Илья. Фундаментальные знания в таких вещах крайне полезны.

[@КостянЕрмаков-е9ю]

Пожалуй завтра на свежую голову еще раз посмотрю. 😁

[@dimwel]

Розбійник - ключ до розуміння відмонності Вю2 від Вю3 ))

[@РоманКовалевский-ф6м]

Посмотрев видео второй раз, намного лучше всё понял:) Спасибо за подробное обьяснение

[@kusov4748]

Круто, получается новая реактивность круче за счёт того что исключаются неочевидные изменения стейта через сторонние объекты

[@ivanfedorov7934]

отличное видео такие тонкости объясняются - это дорогого стоит

[@gerasim_vol]

Крутой контент. Спасибо!

[@ЕкатеринаЗданевич-ы2х]

Фига себе!! Вот это объяснение) и такое красивое) получила удовольствие от просмотра)

[@Vladislav3329RUS]

Сегодня на собесе спросили этот вопрос, ответил неверно, сейчас для меня прям откровение)

[@RuslanDasaev-f7f]

Курс просто бомба!!! Воистину it`s over 9000!!!!

[@alexitu]

Понял то, что к этому видео нужно будет вернуться еще пару раз.

[@АлексейАлексеев-ю3ъ]

Я после каждого видео понимаю, что нужно будет к ним вернуться))

[@alexitu]

@@АлексейАлексеев-ю3ъ да, это хороший способ, главное не сразу возвращаться, а дать мозгу передышку и время на осмысление)

[@faizulla5838]

Учитывая что Реакт это "камасутра" ...а ВЬЮИ это НИНЗЯ .... то к ангуляру вообще опасно подходить ....

[@mikhalpalych]

Это значит только то что чел так объяснил. Бинг мне сейчас этот аспект за минут 5 разжевал

[@faizulla5838]

Рад что начал с Vue тут хоть додзё .... а у тех кто пошел в React .... там Самураии и у них Камасутра.... Димыч там всех ...... во всех позах.

[@romanmalkevych6425]

Годний відос) Дякую)

[@SchnippSchnappShnappi]

Спасибо большое, стало все гораздо яснее!

[@MegaTesei]

Ты такой красавчик! Я как ребёнок тебя слушаю)😶‍🌫

[@КузнецовСергей-н2ф]

Лучшее объяснение, спасибо!

[@SansHAP]

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

[@dudundich6280]

В подобных примерах Нужен заголовок!!! для vue2 `Vu2 ` и для vue3 соотв-щий Зы. приходится вспоминать контекст при переключении экранов с версиями vue - запутывает ....(отматываем назад слушаем - а это про ...vue2 ....) ибо не сразу заметил - см. url ...

[@КостянЕрмаков-е9ю]

Да, есть такое, тоже иногда путался немного. А если ставить на паузу и пытаться разглядеть (на компьютере), то название видео перекрывает название вкладок.

[@cikada3398]

там в названии проекта еще версия указана)

[@wwiiktor]

Чем дальше в лес, тем меньше желающих :D

[@bukanaka]

:В

[@AndKozinsky]

Написал похожий пример на Proxy. Он срабатывает только если я изменяю сам объект proxy напрямую: вставляю новый элемент массива или добавляю свойство. Последняя строка кода не приведет к выводу значения value в Консоле потому что изменяется внутренний объект. let proxy = new Proxy([{ a: 1}], { set(target, prop, value) { target[prop] = value console.log(value) return true } }) const obj = {a: '-'} proxy.push(obj) proxy[1].a = 10 Вью автоматически оборачивает не только корневые данные, но и все вложенные. То есть это обёртки рекурсивно оборачивающие данные в которых находятся другие обёртки с данными.

[@PeterShumski]

Топ контент, спасибо Илья!

[@levdau]

Замечательные видео! Спасибо!

[@isfland]

Даже учитывая, что у меня уже есть опыт в разработке на Vue, было сложно следить за мыслью. Вторая версия, третья версия, геттеры, сеттеры, прокси, все в перемешано в едином чане. Контент отличный, но было бы круто поработать ещё над структурой подачи.

[@corey4448]

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

[@yakovlev_io]

Спасибо за крутое объяснение)

[@yurastasyuk5783]

Дуже цікаво, дякую👍

[@angelproduction4047]

Дуже круто, дуже дякую!

[@ПанЧиЛо]

Спасибо за объяснение, было очень интересно и информативно. Как раз хотел начать изучать вью после реакта. А как освоюсь с первым, попробую и Angular.

[@redhook777]

Vue быстро освоишь, а вот с ангуляром придется попотеть

[@maryanakachanava1049]

Не будет ли проблем во Vue3, если ты сам проксируешь объекты для своих целей? Насколько я понимаю, если обернуть уже запроксированный объект в прокси, заданные хуки как бы сливаются, поэтому по идее все должно быть ок.

[@Owner0]

да будут проблемы если я правильно понял так лучше не делать. Тпо нужно напрямую только с реативными данными работать

[@alexanonymous5823]

просто огонь=)) спасиб огромное=))

[@КонстантинС-ж1ы]

Вопрос по поводу kzbin.info/www/bejne/qqWZh3iIjtR1rac Когда мы напрямую изменили newItem, что произошло с объектом обернутым в прокси? Насколько я понял, его значение тоже изменилось, но в обход прокси, поэтому хоть и не сработала реактивность, но само значение в объекте внутри прокси поменялось? Если мы сравним значения поля price у newItem и у последнего элемента в this.items, то оно будет одинаковым?

[@КонстантинС-ж1ы]

Уже проверил в codesandbox. Действительно значение объекта внутри прокси меняется вместе с значением в newItem. А, чисто теоретически, как правильно обновить прокси, чтобы быть точно уверенным, что сейчас отображается именно те значения, которые реально есть в объекте? Я пробовал такое this.items[this.items.length - 1].price = this.items[this.items.length - 1].price и это не сработало, хотя сработало this.items[this.items.length - 1].price = this.items[this.items.length - 1].price + "test";

[@КонстантинС-ж1ы]

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

[@SansHAP]

@@КонстантинС-ж1ы так в видео о подходе применения реактивности во 2 и 3 версиях, а не о полях объектов. Было же сказано, что ссылки идут на один и тот же объект. Разница лишь в том, что в 3 версии массив Items оборачивается в прокси и любой объект, который записывается в этот Items - проксируется автоматически (попадает в Items не напрямую). "this.items[this.items.length - 1].price = this.items[this.items.length - 1].price и это не сработало" - а что должно сработать, если ничего не поменялось?

[@КонстантинС-ж1ы]

@@SansHAP в общем, для меня было не очевидно, что мы всё таки изменили объект находящийся в массиве, но эти изменения просто не отобразились. this.items[this.items.length - 1].price = this.items[this.items.length - 1].price Я надеялся, что раз я присваиваю через прокси, пусть и то же самое значение, сработает реактивность и обновится отображаемая информация.

[@andreygokhan6893]

@@КонстантинС-ж1ы Описывая ловушку в прокси, только вы можете решить при каких условиях будет срабатывать побочный эффект присвоения - обновление контента html элемента ("реактивность":)) и естественно чтобы напрасно не тревожить дом вы обязательно должны проверять равенство старого и нового значения.

[@ВладимирНетот]

Уже пердставил боль переноса крупного проекта с Vue2 на Vue3 😭

[@АлександрРыков-ж4ы]

Vue3 есть перемена создана через reactive ```js if ( state.paramsGames.Txt.substr(0, 1) === "Q") // так реактивность computed теряется ``` так нет ```js const Txt = state.paramsGames.Txt; if ( Txt.substr(0, 1) === "Q") ``` В чем разница?

[@Owner0]

может что вручную меняется значение ? но я тоже не особо понимаю

[@alexanderx7959]

а вот это - интересно )

[@РоманЮрченко-н9с]

во что превращается прокси когда бабель компилит его для старих браузеров?

[@JavaScriptNinja]

Ни во что. Бабель не умеет комрилировать прокси

[@РоманЮрченко-н9с]

@@JavaScriptNinja понял спс.

[@artemzlobin4054]

Правильно ли я понял, что Вью3 теперь по "реактивности" больше похож на Реакт, чем на Вью2? Какая разница, использовать this.foo = bar или this.set('foo', 'bar'), если origObj.foo = bar не работает. Вы же сами говорили, что возможность не знать ничего про Вью, то есть про this, это основное отличие Вью от Реакта?

[@stabby6521]

Объясните пожалуйста, как вывод в консоль перед пушем в объект, вывел содержимое, когда его там еще не должно быть:?

[@JavaScriptNinja]

потому что консоль хрома "ленивая" - отображает последнее состояние объекта

[@stabby6521]

@@JavaScriptNinja воу, раньше не замечал. Прикольно

[@r2r4ik]

А что не так с codepen???

[@dimariskhakov1057]

Подозреваю, что в codepen нет SFC, в то время как Sandbox максимально близко имитирует разработку на локалке

[@ds40a]

вот то, что попало за "мембрану" не ссылается уже на newItem как вы нарисовали, а есть его не тождественная копия. Вы же сами показали в коде console.log(this.items[this.items.length - 1] === newItem) FALSE Из-за чего изменения в newItem никак не отображаются в его копии за "мембраной". А вообще в данном случае отсутствие явной типизации в языке иллюстрирует как на ровном месте заработать себе кучу проблем. Потому как в версии 3 массив уже не массив, а Proxy и поведение коренным образом отличается, а понять ето просто читая код нет никакой возможности.

[@JavaScriptNinja]

Суть вьюшного прокси как раз в том, что не отличается :)

[@slaty331]

не совсем понимаю при чем тут типизация. Мы обратились к this, к какому то объекту, что то туда положили, при сохранении возможны преобразования. Вот и получилось console.log(this.items[this.items.length - 1] === newItem) это console.log(Proxy=== Object) FALSE. Это не говорит о том что изменения в newItem не произойдут в this.items[this.items.length - 1], просто изменения минуют методы SET в Proxy, из-за чего не произойдут изменения в отображении. Можно обновиться с костылями, вызвав this.$forceUpdate()

[@alexs7931]

А как же в .Net web приложениях(на сервере по крайней мере)? Там всё жёстко типимизированно, в массив items нельзя добавить значение foo не описав его в интерфейсе. Это я клоню в сторону жёсткой типимизации , с целью контроля качества кода.

[@JavaScriptNinja]

Предложите решение для мира JS?

[@alexs7931]

Пусть остаётся так, если в vue2 нет интерактивности(реактивности) на foo, то это даже хорошо, что бы не менялась структура items. 😁

[@Owner0]

мне кажется что если не жестко типизированый язык то проще понимать и писать его

[@alexs7931]

@@Owner0 когда много часов подряд работаешь с кодом , контроль типов в ручную становится проблемой. Речь не о скиле, а о издержках на рутину.

[@ДидарСалимгереев]

🔥🔥🔥

[@АлександрМелянюк-ц9ю]

Спасибо! Нет возможности сейчас смотреть, видео останутся на KZbin?

[@ДидарСалимгереев]

По-моему да, они останутся на плейлисте по Vue

[@ПанЧиЛо]

Да, останутся

[@АлександрМелянюк-ц9ю]

@@ДидарСалимгереев Спасибо!

[@АлександрМелянюк-ц9ю]

@@ПанЧиЛо Спасибо!

[@valerye.8785]

А я когда пробовал работать с Vue 3 думал что он сломанный :)

[@Fillit4]

Так, ну а во Vue4 на чем будет реализована реактивность после проксей Vue3 ? )

[@digitalturkistan1857]

На колбеках

[@404Negative]

на вере в бога

[@bohdans.1479]

Прикольно)

[@DavitAve]

Через два дня на собес должен идти по vue middle рол года как не работал с vue только react что будет фиг знает)))))

[@Antonio-fm1sq]

Спасибо

[@Shadzen]

Получается вью3 старые браузеры не поддерживают? А как же ие10 и андройд 4.2? Для бизнеса это важно, никто не хочет терять дополнительных клиентов.

[@JavaScriptNinja]

Обещали совместимый билд, но он будет вести себя как вью2

[@jackdrengr5069]

IE10 - это Windows 7, поддержку которой сам Microsoft сворачивает вовсю. Может и сторонним разработчикам пора остановиться? Семёрка - отличная ОС, но, увы, ее время подходит к концу.

[@andreygokhan6893]

По мере возможности помогаю таким "клиентам". Устанавливаю им Хром удаляю ярлыки ИЕ и говорю: Интернет поменял кнопочку и теперь кнопочка интернета выглядит так. "Клиенту" достаточно одного сайта - домашней страницы иначе "клиент" может заблудиться.

[@grantorino3465]

Не смешите, уже об ie11 забыли, какой еще 10???

[@jackdrengr5069]

@@grantorino3465 увы, ещё кое-где просят. Сам обычно пытаюсь вразумить или побороть высокими эстимейтами, но если клиент сильно хочет, то приходится.

[@Viktorres1]

Vue 2 - розбійник)

[@stanislav5846]

MERCI MERCI MERCI

[@gunini_kirill]

С первого и двоимого раза не понял. Вернулся снова через 3 дня и как понял)

[@yehudavolodin1183]

жесть

[@yoursleepandrelaxation6948]

Короче я понял. У сеньоров есть такая забава - придумывать себе проблему и потом пытаться ее решить. Весь сыр бор из-за того что он создал новый объект за пределами data и его изменяет

[@teizer1122]

так он не создал новое коневое поле в не data, он просто запушил в массив новый элемент и уже его изменял

[@uran1980video]

Интересно, а Минин эти ньансы объясняет? вопрос риторический =)

[@DES2048]

Об этом написано в документации ко 2му vue, это не какие-то сакральные знания

[@JavaScriptNinja]

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

[@mikhailsorokin3830]

@@DES2048 спасибо большое.А нахрена Минин делает курсы,ведь все,что он говорит,является на 95% текстом доки

[@DES2048]

@@mikhailsorokin3830 его курсы рассчитаны на совсем новичков, и к слову сказать, во фронт я вполне нормально выкатился благодаря его курсам, правда бесплатным на KZbin.

[@alexs7931]

У Минина есть видео о Proxy, кажется о нововведениях в js. Норм видео чо :)

[@stow1x]

Розбійники тут?

[@tomitomion1179]

Ну его нафиг это ваш codesandbox

[@Owner0]

я тоже так подумал

[@faizulla5838]

Что бы понять, что говорит Профессор.... сперва почитай что говорят кандидаты и доктора внизу в комментах Нельзя было немного структурировать? и этот детский лепет-обсуждение с самим собой немного отвлекает. Сам материал взрыв мозга!

[@ИванИванов-ц5ю6х]

Меня одного напрягает сумбурная подача материала с водичкой?

[@gerda-morozova]

Аналогично. Честно говоря меня напрягло, что в примере изменяют не items в data, а объект newItems, который УЖЕ передали в data. Честно - я не знаю кто будет так делать, но, я так полагаю это просто показательный пример, чтобы узнать про тонкости реактивности.

[@IvanIsayev]

Спасибо за контент! Очень полезное видео!