#12 Реализация реактивности - Vue.js: нюансы
HTML-код
- Опубликовано: 20 сен 2024
- Телеграм-сообщество t.me/vuejs_club
CodeSandbox c Vue3: codesandbox.io...
CodeSandbox c Vue2: codesandbox.io...
Материалы:
О реактивности во Vue2: ru.vuejs.org/v...
О геттерах и сеттерах: learn.javascri...
О реактивности во Vue3 (eng): v3.vuejs.org/g...
О Proxy: learn.javascri...
О Vue.set: ru.vuejs.org/v...
Видео создано благодаря подписчикам проекта на нашем Patreon.
Хотите получать контент на 3 месяца раньше остальных? Присоединяйтесь! / javascriptninja
Это очень важное объяснение, к слову! Спасибо за контент 👍
Вот такие тонкости очень сложно отлавливать. Спасибо огромное за разъяснение!
Спасибо Вам, Илья. Фундаментальные знания в таких вещах крайне полезны.
Понял то, что к этому видео нужно будет вернуться еще пару раз.
Я после каждого видео понимаю, что нужно будет к ним вернуться))
@@АлексейАлексеев-ю3ъ да, это хороший способ, главное не сразу возвращаться, а дать мозгу передышку и время на осмысление)
Учитывая что Реакт это "камасутра" ...а ВЬЮИ это НИНЗЯ .... то к ангуляру вообще опасно подходить ....
Это значит только то что чел так объяснил. Бинг мне сейчас этот аспект за минут 5 разжевал
Пожалуй завтра на свежую голову еще раз посмотрю. 😁
Посмотрев видео второй раз, намного лучше всё понял:)
Спасибо за подробное обьяснение
Круто, получается новая реактивность круче за счёт того что исключаются неочевидные изменения стейта через сторонние объекты
Крутой контент. Спасибо!
отличное видео такие тонкости объясняются - это дорогого стоит
Спасибо большое, стало все гораздо яснее!
Фига себе!! Вот это объяснение) и такое красивое) получила удовольствие от просмотра)
Рад что начал с Vue тут хоть додзё .... а у тех кто пошел в React .... там Самураии и у них Камасутра.... Димыч там всех ...... во всех позах.
Сегодня на собесе спросили этот вопрос, ответил неверно, сейчас для меня прям откровение)
Чем дальше в лес, тем меньше желающих :D
:В
Курс просто бомба!!! Воистину it`s over 9000!!!!
Даже учитывая, что у меня уже есть опыт в разработке на Vue, было сложно следить за мыслью. Вторая версия, третья версия, геттеры, сеттеры, прокси, все в перемешано в едином чане. Контент отличный, но было бы круто поработать ещё над структурой подачи.
У человека есть проблема - реактивность в его новом проекте не работает. Он находит этот видос, смотрит, и понимает что не так. Если у тебя есть опыт в разработке на Вью, но видос типа сложен, то скорее всего с такими нюансами мог просто не столкнуться, например когда проект мейнтейнишь, а не с нуля делаешь.
Розбійник - ключ до розуміння відмонності Вю2 від Вю3 ))
Ты такой красавчик! Я как ребёнок тебя слушаю)😶🌫
Годний відос) Дякую)
Лучшее объяснение, спасибо!
В подобных примерах Нужен заголовок!!! для 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, если ты сам проксируешь объекты для своих целей?
Насколько я понимаю, если обернуть уже запроксированный объект в прокси, заданные хуки как бы сливаются, поэтому по идее все должно быть ок.
да будут проблемы если я правильно понял так лучше не делать. Тпо нужно напрямую только с реативными данными работать
а вот это - интересно )
Спасибо за объяснение, было очень интересно и информативно. Как раз хотел начать изучать вью после реакта. А как освоюсь с первым, попробую и Angular.
Vue быстро освоишь, а вот с ангуляром придется попотеть
Уже пердставил боль переноса крупного проекта с Vue2 на Vue3 😭
Правильно ли я понял, что Вью3 теперь по "реактивности" больше похож на Реакт, чем на Вью2? Какая разница, использовать this.foo = bar или this.set('foo', 'bar'), если origObj.foo = bar не работает. Вы же сами говорили, что возможность не знать ничего про Вью, то есть про this, это основное отличие Вью от Реакта?
🔥🔥🔥
вот то, что попало за "мембрану" не ссылается уже на 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()
Прикольно)
Спасибо
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
А я когда пробовал работать с Vue 3 думал что он сломанный :)
Спасибо! Нет возможности сейчас смотреть, видео останутся на RUclips?
По-моему да, они останутся на плейлисте по Vue
Да, останутся
@@ДидарСалимгереев Спасибо!
@@ПанЧиЛо Спасибо!
во что превращается прокси когда бабель компилит его для старих браузеров?
Ни во что. Бабель не умеет комрилировать прокси
@@JavaScriptNinja понял спс.
Вопрос по поводу ruclips.net/video/tt6VERYoBwE/видео.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 мы не увидели изменений на экране, это не значит, что данные не изменились.
@@КонстантинС-ж1ы так в видео о подходе применения реактивности во 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
Я надеялся, что раз я присваиваю через прокси, пусть и то же самое значение, сработает реактивность и обновится отображаемая информация.
@@КонстантинС-ж1ы Описывая ловушку в прокси, только вы можете решить при каких условиях будет срабатывать побочный эффект присвоения - обновление контента html элемента ("реактивность":)) и естественно чтобы напрасно не тревожить дом вы обязательно должны проверять равенство старого и нового значения.
А что не так с codepen???
Подозреваю, что в codepen нет SFC, в то время как Sandbox максимально близко имитирует разработку на локалке
жесть
Vue 2 - розбійник)
Розбійники тут?
Объясните пожалуйста, как вывод в консоль перед пушем в объект, вывел содержимое, когда его там еще не должно быть:?
потому что консоль хрома "ленивая" - отображает последнее состояние объекта
@@JavaScriptNinja воу, раньше не замечал. Прикольно
С первого и двоимого раза не понял. Вернулся снова через 3 дня и как понял)
Так, ну а во Vue4 на чем будет реализована реактивность после проксей Vue3 ? )
На колбеках
на вере в бога
Короче я понял. У сеньоров есть такая забава - придумывать себе проблему и потом пытаться ее решить. Весь сыр бор из-за того что он создал новый объект за пределами data и его изменяет
так он не создал новое коневое поле в не data, он просто запушил в массив новый элемент и уже его изменял
А как же в .Net web приложениях(на сервере по крайней мере)? Там всё жёстко типимизированно, в массив items нельзя добавить значение foo не описав его в интерфейсе.
Это я клоню в сторону жёсткой типимизации , с целью контроля качества кода.
Предложите решение для мира JS?
Пусть остаётся так, если в vue2 нет интерактивности(реактивности) на foo, то это даже хорошо, что бы не менялась структура items. 😁
мне кажется что если не жестко типизированый язык то проще понимать и писать его
@@Owner0 когда много часов подряд работаешь с кодом , контроль типов в ручную становится проблемой.
Речь не о скиле, а о издержках на рутину.
Через два дня на собес должен идти по vue middle рол года как не работал с vue только react что будет фиг знает)))))
Получается вью3 старые браузеры не поддерживают? А как же ие10 и андройд 4.2? Для бизнеса это важно, никто не хочет терять дополнительных клиентов.
Обещали совместимый билд, но он будет вести себя как вью2
IE10 - это Windows 7, поддержку которой сам Microsoft сворачивает вовсю. Может и сторонним разработчикам пора остановиться? Семёрка - отличная ОС, но, увы, ее время подходит к концу.
По мере возможности помогаю таким "клиентам". Устанавливаю им Хром удаляю ярлыки ИЕ и говорю: Интернет поменял кнопочку и теперь кнопочка интернета выглядит так. "Клиенту" достаточно одного сайта - домашней страницы иначе "клиент" может заблудиться.
Не смешите, уже об ie11 забыли, какой еще 10???
@@grantorino3465 увы, ещё кое-где просят. Сам обычно пытаюсь вразумить или побороть высокими эстимейтами, но если клиент сильно хочет, то приходится.
Интересно, а Минин эти ньансы объясняет? вопрос риторический =)
Об этом написано в документации ко 2му vue, это не какие-то сакральные знания
Смотря о чем. Если о различии в поведении вью3 и вью2 - то у меня ушло время чтобы сделать код, который работает во вью2 но не работает во вью3 (не наоборот)
@@DES2048 спасибо большое.А нахрена Минин делает курсы,ведь все,что он говорит,является на 95% текстом доки
@@mikhailsorokin3830 его курсы рассчитаны на совсем новичков, и к слову сказать, во фронт я вполне нормально выкатился благодаря его курсам, правда бесплатным на RUclips.
У Минина есть видео о Proxy, кажется о нововведениях в js. Норм видео чо :)
Ну его нафиг это ваш codesandbox
я тоже так подумал
Что бы понять, что говорит Профессор.... сперва почитай что говорят кандидаты и доктора внизу в комментах
Нельзя было немного структурировать? и этот детский лепет-обсуждение с самим собой немного отвлекает.
Сам материал взрыв мозга!
Меня одного напрягает сумбурная подача материала с водичкой?
Аналогично. Честно говоря меня напрягло, что в примере изменяют не items в data, а объект newItems, который УЖЕ передали в data. Честно - я не знаю кто будет так делать, но, я так полагаю это просто показательный пример, чтобы узнать про тонкости реактивности.
Спасибо за контент! Очень полезное видео!