Даже учитывая, что у меня уже есть опыт в разработке на Vue, было сложно следить за мыслью. Вторая версия, третья версия, геттеры, сеттеры, прокси, все в перемешано в едином чане. Контент отличный, но было бы круто поработать ещё над структурой подачи.
У человека есть проблема - реактивность в его новом проекте не работает. Он находит этот видос, смотрит, и понимает что не так. Если у тебя есть опыт в разработке на Вью, но видос типа сложен, то скорее всего с такими нюансами мог просто не столкнуться, например когда проект мейнтейнишь, а не с нуля делаешь.
В подобных примерах Нужен заголовок!!! для vue2 `Vu2 ` и для vue3 соотв-щий Зы. приходится вспоминать контекст при переключении экранов с версиями vue - запутывает ....(отматываем назад слушаем - а это про ...vue2 ....) ибо не сразу заметил - см. url ...
Да, есть такое, тоже иногда путался немного. А если ставить на паузу и пытаться разглядеть (на компьютере), то название видео перекрывает название вкладок.
Илья, в этом видео все супер. Очень радует, что наконец в этом плане Vue начал вести себя ожидаемо. А в телеге так и не получил ответ на заданный вопрос ((
Написал похожий пример на 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 Вью автоматически оборачивает не только корневые данные, но и все вложенные. То есть это обёртки рекурсивно оборачивающие данные в которых находятся другие обёртки с данными.
Не будет ли проблем во Vue3, если ты сам проксируешь объекты для своих целей? Насколько я понимаю, если обернуть уже запроксированный объект в прокси, заданные хуки как бы сливаются, поэтому по идее все должно быть ок.
Правильно ли я понял, что Вью3 теперь по "реактивности" больше похож на Реакт, чем на Вью2? Какая разница, использовать this.foo = bar или this.set('foo', 'bar'), если origObj.foo = bar не работает. Вы же сами говорили, что возможность не знать ничего про Вью, то есть про this, это основное отличие Вью от Реакта?
Что бы понять, что говорит Профессор.... сперва почитай что говорят кандидаты и доктора внизу в комментах Нельзя было немного структурировать? и этот детский лепет-обсуждение с самим собой немного отвлекает. Сам материал взрыв мозга!
Vue3 есть перемена создана через reactive ```js if ( state.paramsGames.Txt.substr(0, 1) === "Q") // так реактивность computed теряется ``` так нет ```js const Txt = state.paramsGames.Txt; if ( Txt.substr(0, 1) === "Q") ``` В чем разница?
Вопрос по поводу czcams.com/video/tt6VERYoBwE/video.html Когда мы напрямую изменили newItem, что произошло с объектом обернутым в прокси? Насколько я понял, его значение тоже изменилось, но в обход прокси, поэтому хоть и не сработала реактивность, но само значение в объекте внутри прокси поменялось? Если мы сравним значения поля price у newItem и у последнего элемента в this.items, то оно будет одинаковым?
Уже проверил в 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";
@@user-ed7wi6xn5n так в видео о подходе применения реактивности во 2 и 3 версиях, а не о полях объектов. Было же сказано, что ссылки идут на один и тот же объект. Разница лишь в том, что в 3 версии массив Items оборачивается в прокси и любой объект, который записывается в этот Items - проксируется автоматически (попадает в Items не напрямую). "this.items[this.items.length - 1].price = this.items[this.items.length - 1].price и это не сработало" - а что должно сработать, если ничего не поменялось?
@@SansHAP в общем, для меня было не очевидно, что мы всё таки изменили объект находящийся в массиве, но эти изменения просто не отобразились. this.items[this.items.length - 1].price = this.items[this.items.length - 1].price Я надеялся, что раз я присваиваю через прокси, пусть и то же самое значение, сработает реактивность и обновится отображаемая информация.
@@user-ed7wi6xn5n Описывая ловушку в прокси, только вы можете решить при каких условиях будет срабатывать побочный эффект присвоения - обновление контента html элемента ("реактивность":)) и естественно чтобы напрасно не тревожить дом вы обязательно должны проверять равенство старого и нового значения.
вот то, что попало за "мембрану" не ссылается уже на newItem как вы нарисовали, а есть его не тождественная копия. Вы же сами показали в коде console.log(this.items[this.items.length - 1] === newItem) FALSE Из-за чего изменения в newItem никак не отображаются в его копии за "мембраной". А вообще в данном случае отсутствие явной типизации в языке иллюстрирует как на ровном месте заработать себе кучу проблем. Потому как в версии 3 массив уже не массив, а Proxy и поведение коренным образом отличается, а понять ето просто читая код нет никакой возможности.
не совсем понимаю при чем тут типизация. Мы обратились к 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()
Короче я понял. У сеньоров есть такая забава - придумывать себе проблему и потом пытаться ее решить. Весь сыр бор из-за того что он создал новый объект за пределами data и его изменяет
А как же в .Net web приложениях(на сервере по крайней мере)? Там всё жёстко типимизированно, в массив items нельзя добавить значение foo не описав его в интерфейсе. Это я клоню в сторону жёсткой типимизации , с целью контроля качества кода.
IE10 - это Windows 7, поддержку которой сам Microsoft сворачивает вовсю. Может и сторонним разработчикам пора остановиться? Семёрка - отличная ОС, но, увы, ее время подходит к концу.
По мере возможности помогаю таким "клиентам". Устанавливаю им Хром удаляю ярлыки ИЕ и говорю: Интернет поменял кнопочку и теперь кнопочка интернета выглядит так. "Клиенту" достаточно одного сайта - домашней страницы иначе "клиент" может заблудиться.
Смотря о чем. Если о различии в поведении вью3 и вью2 - то у меня ушло время чтобы сделать код, который работает во вью2 но не работает во вью3 (не наоборот)
@@mikhailsorokin3830 его курсы рассчитаны на совсем новичков, и к слову сказать, во фронт я вполне нормально выкатился благодаря его курсам, правда бесплатным на CZcams.
Аналогично. Честно говоря меня напрягло, что в примере изменяют не items в data, а объект newItems, который УЖЕ передали в data. Честно - я не знаю кто будет так делать, но, я так полагаю это просто показательный пример, чтобы узнать про тонкости реактивности.
Понял то, что к этому видео нужно будет вернуться еще пару раз.
Я после каждого видео понимаю, что нужно будет к ним вернуться))
@@user-hc7tf5fd3g да, это хороший способ, главное не сразу возвращаться, а дать мозгу передышку и время на осмысление)
Учитывая что Реакт это "камасутра" ...а ВЬЮИ это НИНЗЯ .... то к ангуляру вообще опасно подходить ....
Это значит только то что чел так объяснил. Бинг мне сейчас этот аспект за минут 5 разжевал
Это очень важное объяснение, к слову! Спасибо за контент 👍
Вот такие тонкости очень сложно отлавливать. Спасибо огромное за разъяснение!
Пожалуй завтра на свежую голову еще раз посмотрю. 😁
Спасибо Вам, Илья. Фундаментальные знания в таких вещах крайне полезны.
Даже учитывая, что у меня уже есть опыт в разработке на Vue, было сложно следить за мыслью. Вторая версия, третья версия, геттеры, сеттеры, прокси, все в перемешано в едином чане. Контент отличный, но было бы круто поработать ещё над структурой подачи.
У человека есть проблема - реактивность в его новом проекте не работает. Он находит этот видос, смотрит, и понимает что не так. Если у тебя есть опыт в разработке на Вью, но видос типа сложен, то скорее всего с такими нюансами мог просто не столкнуться, например когда проект мейнтейнишь, а не с нуля делаешь.
Круто, получается новая реактивность круче за счёт того что исключаются неочевидные изменения стейта через сторонние объекты
Посмотрев видео второй раз, намного лучше всё понял:)
Спасибо за подробное обьяснение
отличное видео такие тонкости объясняются - это дорогого стоит
Сегодня на собесе спросили этот вопрос, ответил неверно, сейчас для меня прям откровение)
Крутой контент. Спасибо!
Розбійник - ключ до розуміння відмонності Вю2 від Вю3 ))
Фига себе!! Вот это объяснение) и такое красивое) получила удовольствие от просмотра)
Рад что начал с Vue тут хоть додзё .... а у тех кто пошел в React .... там Самураии и у них Камасутра.... Димыч там всех ...... во всех позах.
Чем дальше в лес, тем меньше желающих :D
:В
Спасибо большое, стало все гораздо яснее!
Курс просто бомба!!! Воистину it`s over 9000!!!!
В подобных примерах Нужен заголовок!!! для vue2 `Vu2 ` и для vue3 соотв-щий
Зы. приходится вспоминать контекст при переключении экранов с версиями vue - запутывает ....(отматываем назад слушаем - а это про ...vue2 ....)
ибо не сразу заметил - см. url ...
Да, есть такое, тоже иногда путался немного.
А если ставить на паузу и пытаться разглядеть (на компьютере), то название видео перекрывает название вкладок.
там в названии проекта еще версия указана)
Илья, в этом видео все супер. Очень радует, что наконец в этом плане Vue начал вести себя ожидаемо.
А в телеге так и не получил ответ на заданный вопрос ((
Ты такой красавчик! Я как ребёнок тебя слушаю)😶🌫
Годний відос) Дякую)
Лучшее объяснение, спасибо!
Написал похожий пример на 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
Вью автоматически оборачивает не только корневые данные, но и все вложенные. То есть это обёртки рекурсивно оборачивающие данные в которых находятся другие обёртки с данными.
Дуже цікаво, дякую👍
Замечательные видео! Спасибо!
Спасибо за крутое объяснение)
Топ контент, спасибо Илья!
Дуже круто, дуже дякую!
Спасибо за объяснение, было очень интересно и информативно. Как раз хотел начать изучать вью после реакта. А как освоюсь с первым, попробую и Angular.
Vue быстро освоишь, а вот с ангуляром придется попотеть
просто огонь=)) спасиб огромное=))
а вот это - интересно )
Не будет ли проблем во Vue3, если ты сам проксируешь объекты для своих целей?
Насколько я понимаю, если обернуть уже запроксированный объект в прокси, заданные хуки как бы сливаются, поэтому по идее все должно быть ок.
да будут проблемы если я правильно понял так лучше не делать. Тпо нужно напрямую только с реативными данными работать
А я когда пробовал работать с Vue 3 думал что он сломанный :)
Прикольно)
🔥🔥🔥
Спасибо
Правильно ли я понял, что Вью3 теперь по "реактивности" больше похож на Реакт, чем на Вью2? Какая разница, использовать this.foo = bar или this.set('foo', 'bar'), если origObj.foo = bar не работает. Вы же сами говорили, что возможность не знать ничего про Вью, то есть про this, это основное отличие Вью от Реакта?
Что бы понять, что говорит Профессор.... сперва почитай что говорят кандидаты и доктора внизу в комментах
Нельзя было немного структурировать? и этот детский лепет-обсуждение с самим собой немного отвлекает.
Сам материал взрыв мозга!
во что превращается прокси когда бабель компилит его для старих браузеров?
Ни во что. Бабель не умеет комрилировать прокси
@@JavaScriptNinja понял спс.
Vue3
есть перемена создана через reactive
```js
if ( state.paramsGames.Txt.substr(0, 1) === "Q") // так реактивность computed теряется
```
так нет
```js
const Txt = state.paramsGames.Txt;
if ( Txt.substr(0, 1) === "Q")
```
В чем разница?
может что вручную меняется значение ? но я тоже не особо понимаю
MERCI MERCI MERCI
Уже пердставил боль переноса крупного проекта с Vue2 на Vue3 😭
Вопрос по поводу czcams.com/video/tt6VERYoBwE/video.html Когда мы напрямую изменили newItem, что произошло с объектом обернутым в прокси? Насколько я понял, его значение тоже изменилось, но в обход прокси, поэтому хоть и не сработала реактивность, но само значение в объекте внутри прокси поменялось? Если мы сравним значения поля price у newItem и у последнего элемента в this.items, то оно будет одинаковым?
Уже проверил в 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";
В общем, мне кажется есть смысл отдельно осветить, что хотя в vue3 мы не увидели изменений на экране, это не значит, что данные не изменились.
@@user-ed7wi6xn5n так в видео о подходе применения реактивности во 2 и 3 версиях, а не о полях объектов. Было же сказано, что ссылки идут на один и тот же объект. Разница лишь в том, что в 3 версии массив Items оборачивается в прокси и любой объект, который записывается в этот Items - проксируется автоматически (попадает в Items не напрямую).
"this.items[this.items.length - 1].price = this.items[this.items.length - 1].price и это не сработало" - а что должно сработать, если ничего не поменялось?
@@SansHAP в общем, для меня было не очевидно, что мы всё таки изменили объект находящийся в массиве, но эти изменения просто не отобразились.
this.items[this.items.length - 1].price = this.items[this.items.length - 1].price
Я надеялся, что раз я присваиваю через прокси, пусть и то же самое значение, сработает реактивность и обновится отображаемая информация.
@@user-ed7wi6xn5n Описывая ловушку в прокси, только вы можете решить при каких условиях будет срабатывать побочный эффект присвоения - обновление контента html элемента ("реактивность":)) и естественно чтобы напрасно не тревожить дом вы обязательно должны проверять равенство старого и нового значения.
вот то, что попало за "мембрану" не ссылается уже на newItem как вы нарисовали, а есть его не тождественная копия. Вы же сами показали в коде console.log(this.items[this.items.length - 1] === newItem) FALSE Из-за чего изменения в newItem никак не отображаются в его копии за "мембраной". А вообще в данном случае отсутствие явной типизации в языке иллюстрирует как на ровном месте заработать себе кучу проблем. Потому как в версии 3 массив уже не массив, а Proxy и поведение коренным образом отличается, а понять ето просто читая код нет никакой возможности.
Суть вьюшного прокси как раз в том, что не отличается :)
не совсем понимаю при чем тут типизация. Мы обратились к 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()
жесть
Короче я понял. У сеньоров есть такая забава - придумывать себе проблему и потом пытаться ее решить. Весь сыр бор из-за того что он создал новый объект за пределами data и его изменяет
так он не создал новое коневое поле в не data, он просто запушил в массив новый элемент и уже его изменял
Vue 2 - розбійник)
С первого и двоимого раза не понял. Вернулся снова через 3 дня и как понял)
Через два дня на собес должен идти по vue middle рол года как не работал с vue только react что будет фиг знает)))))
Объясните пожалуйста, как вывод в консоль перед пушем в объект, вывел содержимое, когда его там еще не должно быть:?
потому что консоль хрома "ленивая" - отображает последнее состояние объекта
@@JavaScriptNinja воу, раньше не замечал. Прикольно
А что не так с codepen???
Подозреваю, что в codepen нет SFC, в то время как Sandbox максимально близко имитирует разработку на локалке
А как же в .Net web приложениях(на сервере по крайней мере)? Там всё жёстко типимизированно, в массив items нельзя добавить значение foo не описав его в интерфейсе.
Это я клоню в сторону жёсткой типимизации , с целью контроля качества кода.
Предложите решение для мира JS?
Пусть остаётся так, если в vue2 нет интерактивности(реактивности) на foo, то это даже хорошо, что бы не менялась структура items. 😁
мне кажется что если не жестко типизированый язык то проще понимать и писать его
@@Owner0 когда много часов подряд работаешь с кодом , контроль типов в ручную становится проблемой.
Речь не о скиле, а о издержках на рутину.
Спасибо! Нет возможности сейчас смотреть, видео останутся на CZcams?
По-моему да, они останутся на плейлисте по Vue
Да, останутся
@@user-mg3ul1zb3s Спасибо!
@@user-rg5tk3sw6v Спасибо!
Так, ну а во Vue4 на чем будет реализована реактивность после проксей Vue3 ? )
На колбеках
на вере в бога
Получается вью3 старые браузеры не поддерживают? А как же ие10 и андройд 4.2? Для бизнеса это важно, никто не хочет терять дополнительных клиентов.
Обещали совместимый билд, но он будет вести себя как вью2
IE10 - это Windows 7, поддержку которой сам Microsoft сворачивает вовсю. Может и сторонним разработчикам пора остановиться? Семёрка - отличная ОС, но, увы, ее время подходит к концу.
По мере возможности помогаю таким "клиентам". Устанавливаю им Хром удаляю ярлыки ИЕ и говорю: Интернет поменял кнопочку и теперь кнопочка интернета выглядит так. "Клиенту" достаточно одного сайта - домашней страницы иначе "клиент" может заблудиться.
Не смешите, уже об ie11 забыли, какой еще 10???
@@grantorino3465 увы, ещё кое-где просят. Сам обычно пытаюсь вразумить или побороть высокими эстимейтами, но если клиент сильно хочет, то приходится.
Розбійники тут?
Интересно, а Минин эти ньансы объясняет? вопрос риторический =)
Об этом написано в документации ко 2му vue, это не какие-то сакральные знания
Смотря о чем. Если о различии в поведении вью3 и вью2 - то у меня ушло время чтобы сделать код, который работает во вью2 но не работает во вью3 (не наоборот)
@@DES2048 спасибо большое.А нахрена Минин делает курсы,ведь все,что он говорит,является на 95% текстом доки
@@mikhailsorokin3830 его курсы рассчитаны на совсем новичков, и к слову сказать, во фронт я вполне нормально выкатился благодаря его курсам, правда бесплатным на CZcams.
У Минина есть видео о Proxy, кажется о нововведениях в js. Норм видео чо :)
Ну его нафиг это ваш codesandbox
я тоже так подумал
Меня одного напрягает сумбурная подача материала с водичкой?
Аналогично. Честно говоря меня напрягло, что в примере изменяют не items в data, а объект newItems, который УЖЕ передали в data. Честно - я не знаю кто будет так делать, но, я так полагаю это просто показательный пример, чтобы узнать про тонкости реактивности.
Спасибо за контент! Очень полезное видео!