#23 nextTick - Vue.js: нюансы
ฝัง
- เผยแพร่เมื่อ 24 ก.ย. 2024
- Вопросы? Присоединяйтесь к сообществу t.me/vuejs_club
Итоговый код урока: gitlab.com/vue...
Материалы к видео:
- ru.vuejs.org/v...
Видео создано благодаря подписчикам проекта на нашем Patreon.
Присоединяйтесь! / javascriptninja
Увидел сам по ходу прошлых уроков, пытался решить теми же способами что автор сейчас показал как нерабочие, а в конце прошлого урока уже почти отчаялся и чуть не перешёл к тому, чтобы поставить setTimeout (🤦♂) Но решил на всякий случай открыть начало следующего (этого) видео, и... вот как чувствовал!) Счастью не было предела, что это не я накосячил где-то или курс устарел и во Vue3 всё поменялось, а что проблема "задумана", и автор разбирает всю суть и показывает правильное решение. ТОП! Спасибо огромное за курс!
Какой же кайф, что я сам это увидел и решил до просмотра следующего видео))
Для меня однозначно в watch: Вотчеры отвечают на вопрос - если что-то изменилось, сделай то-то. Изменился выбранный тикер? Пересчитай.
Спасибо, как обычно очень круто 👍
Илья, я тебе очень благодарен за твои видео. Большое человеческое спасибо!
блин круто что вы разные фишки дев тулзов используете, я про них даже и не думал раньче=))
Спасибо, всё по полочкам)
база , виручив 👍
огонь=)) спасибо большое=))
думаю watch будет лучше, чтобы в методе оставалась только логика отображения, которая может измениться в дальнейшем, а watch будет отслеживать только изменения нужных данных, но возможно ошибаюсь
Следующее видео выйдет 19.03.2021 в 10:00
нет (
где? или нужно задонатить на питрион?
@@cikada3398 жизнь задержалась на месяцок. Скоро :)
лучше не в watch так как эта вещь тяжелая и есть риск возникновения рекурсии
Спасибо!
$nextTick() вместо setTimeout то что надо, главное верно его использовать
Я бы в методе оставил
Спасибо за объяснение только что спросили на собесе это
Думаю в watch. Например, в будущем мы захотим отрисовать график сразу по кнопке добавить. Изменяем только текущий ticker, watch отследит и не будет повторения кода. С другой стороны мне сложно становиться ориентироваться в таком коде. Вот метод select по нему мы делаем то то, а в итоге он за собой еще паровоз тянет.
Спасибо большое за урок
Хотел поначалу спросить, являлось ли в данном кейсе валидным использование v-show для графика вместо v-if, но проверив, выяснилось, что в этом случае также не получится высчитывать ширину, если график скрыт :)
Поэтому следующий вопрос - можно ли заместо использования nextTick просто повесить сам ref на, к примеру, контейнер? у него такая же ширина и контейнер у нас отрисовывается всегда
Является ли такое решение - решением? Или nextTick единственный валидный вариант в таком случае?
в этом уроке основная мысль была: если дело касается отрисовки dom, есть nextTick
было сказано и если используется nextTick не для манипуляций с dom - значит что-то делается не так
но не было сказано, является ли это единственный правильным решением
в документации также не нашел текста, который бы прямо говорил "Если DOM, то nextTick, не нужно искать 'окольных путей' "
```
When you mutate reactive state in Vue, the resulting DOM updates are not applied synchronously. Instead, Vue buffers them until the "next tick" to ensure that each component updates only once no matter how many state changes you have made.
nextTick() can be used immediately after a state change to wait for the DOM updates to complete. You can either pass a callback as an argument, or await the returned Promise.
```
Круто, на попередньому відео про Ref чекав моменту коли воно поламається бо ref не існує в mounted, а воно працювало і подумав що то різниця у Vue 3 так, що ref в mounted досутпний без тіка :)
Поліз в документацію Vue 2 i Vue 3, перепровірив в коді і не міг поняти чому воно працює на відео, а в мене ні. Добре що глянув назву цього відео))
Коли лише починав на Vue писати і переносив проект з jquery на Vue часто користувався ref і зловив цю помилку і добрі люди на форомі Vue підказали tick юзати.
Привет, во vue 2 вынес fetch в другой файл все как на видео. в ответ приходит всегда андефайнет. Если же ничего не менять в том фетче и перенести его обратно в компонент то все нормально не знаю в чем проблема может будет минута обьяснить в каком-то из видео или в тут ответишь.))
Возможно я ошибаюсь но както не очень явно получается вызов некст тика и ожидание того что должно произойти. Я к тому что есть ли у нас гарантия того что должно быть после некст тика, и как это увидить в коде через месяц, а если есть какойто еще параметр который заблокирует рендер этого элемента в другом месте? К примеру в реакте мы можем вызвать колбек на рефе и гарантированно получить елемент который нам нужен только тогда когда он отрендерится не думая о том каким образом это случится с самим елементом и что будет предшествовать его рендеру. Мне кажется что у этой истории с некс тиком должно быть продолжение :)
Если вы прочитаете доки, то увидите что во вью точно так же есть колбек рефы.
Илья когда продолжение этого восхитительного курса ? =)
Сегодня ночью надеюсь
Уже скоро месяц со дня выхода этого урока(( я думал, что пока дойду до него, то будет много новых выпусков((
Что поделать, придется ждать понедельника или вторника, возобновляем выпуски, потом после 50 и 100 тоже будут перерывы
@@JavaScriptNinja в одном из выпусков от Вас прозвучала фраза "наш курс неуклонно движется к концу". И я подумал, что будет всего выпусков 30 )) во как быстро Вью можно освоить)) А так получается даже до экватора еще далеко)
В любом случае нереально благодарен за такой курс - это лучший формат среди возможных. Ну а с частотой выхода приходется смериться)
@@user-san-chous Не курс, криптономикон ) Следующее задание будет другим. Обещаю не делать больше таких пауз
@@JavaScriptNinja сегодня будет выпуск?
@@АндрейСилецкий-ч3е Да, сейчас конференцию веду
Ребят подскажите пожалуйста - я хочу писать на Vue 3 или даже Vue Composition API в Alt V (GTA 5), как компиляцию .... статичной что ли, чтобы загружать сайт не через Serve (и т.п.), а обычным открытием файла .html
В методе выглядит логичнее, ширина экрана ведь не меняется при изменении монеты
Парни кто в курсе, какая тема оформления VsCode стоит у Ильи на этом видосе?
Для меня было болью в большом проекте, что nextTick ждет только перерисовку компонента, в котором он вызван, а не всего приложения в целом. Нужно это учитывать.
Это не так, вернее не совсем так :)
В этом случае архитектура проекта кривая, и жаловаться на nextTick не нужно.
@@ТарасМаковейчук динамически подключаемые компоненты с отключеным prefetch'ем - кривая архитектура? Кейсы разные бывают.
@@sad_rin Зачем в этом случае nextTick ? Меняется стейт в компоненте и соответственно подстраивается отображение. Меняется стейт зависимого компонента и меняется его отображение.
Я предполагаю, что в компоненте была реализована логика приложения (что архитектурно неверно), и это вызвало проблему.
vue уже явно не проще реакта)
Писал-писал костыли... А оно оказывается не надо было. Спасибо за хорошего студента, но можно предупреждать, что исправлять не надо))
А курс ще продовжиться?
Ага, сегодня (или может уже завтра календарно)
@@JavaScriptNinja а відео так і немає((
Это не колбэк - это промис !!!
Вы не понимаете, это другое
english please :(
Не много не понятен момент на 5:10 с this.$nextTick.then(this.calculateMaxGraphElements). nextTick принимает колбек, мы можем записать просто this.$nextTick(this.calculateMaxGraphElements) и сэкономить на слове then
я не люблю использовать коллбеки, предпочитаю промисы