приветствую вас друзья и в этом ролике мы подготовимся к собеседованию на view разработчика разберем 50 самых часто встречаемых вопросов и давайте сразу же приступим что такое двустороннее связывание у сторонние связывание позволяет динамически менять значения на одном конце привязки при изменениях на другом конце контексте view и вообще фронтэнда чаще всего под двухсторонним связыванием подразумевают связывание графического интерфейса с данными с которыми мы работаем рассмотрим вот такой визуальный
00:00:03 - 00:01:07
пример есть страница и некоторый view компонент которым есть одна модель e-mail и мы связываем значение которое находится в им пути с моделью е mail и таким образом мы добиваемся синхронизации и визуальное отображение всегда совпадает с данными с которыми мы работаем следующий вопрос какими способами можно реализовать двустороннее связывание для input рассмотрим на практическом примере есть input и есть некоторая модель которая называется input вылью необходимо реализовать двустороннее связывание
00:00:35 - 00:01:37
первый самый классический способ это как вылью передать модель и подписаться на события input и в обработчике этого события из вен в таргет достаем как раз вылью это текущее значение input а и помещаем это значение в модель таким образом у нас всегда значение в пути будет совпадать с моделью давайте в этом убедимся напишем что-нибудь в input как видим модель также изменяется это был классический способ который сработает не только во вью новью предоставляет удобный синтаксис который называется в
00:01:06 - 00:02:10
моду он позволяет точно таким же образом создать двустороннее связывание попробуем написать что-нибудь в пути и видим что модель также изменяется третий вопрос что такое props пропсы то некоторые входные параметры пользовательские атрибуты которые может принимать компонент рапса являются свойствами компонентой мы можем их использовать как как каких-то методов как в шаблоне так и в принципе в любом месте компонента список процессов которые ожидают компонент объявляются в свойстве props при этом их может быть
00:01:38 - 00:02:43
абсолютно любое количество с помощью проб saw мы можем использовать компонентный подход и передавать данные из родительских компонентов в дочерние четвертый вопрос как работает реактивность во вью начнем в принципе с определения реактивности реактивность это некоторая концепция которая позволяет приспосабливаться к изменениям данных декларативным способом то есть мы изменили какие-то данные в коде и сразу увидели их изменения на странице давайте рассмотрим такой небольшой пример если бы мы не использовали никакой
00:02:10 - 00:03:10
фреймворк у нас есть страница кнопка поставить лайк и некоторые счетчик которые количество лайков отображает данном случае у нас есть некоторый div и кнопка на кнопку мы вешаем слушайте в событие нажатия изменяя в ней значение счетчика при таком значении данные у нас изменяются то есть значение переменной k under у нас каждый раз инкрементироваться на единицу но при этом отображение на странице никак не изменяется для того чтобы при нажатии на кнопку видеть изменения нам необходимо напрямую руками
00:02:40 - 00:03:39
изменять текст нутри дива то есть мы сосредотачиваемся не только на логике по работе с данными а еще и над графическим визуальным представлением этих данных мы должны следить за тем чтобы эти данные на странице действительно изменялись рассмотрим подобный пример но уже в рамках view you являются реактивным фреймворком опять же есть блок div кнопка некоторая модель likes и при нажатии на кнопку мы эту модель инкрементируем то есть увеличиваем значение на единицу при этом при нажатии на кнопку мы работаем только с данными
00:03:10 - 00:04:10
напрямую с графическим отображением мы никак не взаимодействуем и если мы попробуем нажать на кнопку то интерфейс автоматически адаптируется под изменения данных такое поведение и называется как раз реактивностью теперь на простом примере поговорим о том как эта реактивность реализм вон какие механизмы позволяют отслеживать изменения данных и обновлять графический интерфейс сразу скажу что во вью второй версии его view 3 версии эти механизмы немного отличаются во вью третьей версии используется java скриптовый объект
00:03:40 - 00:04:42
рокси а во вью второй версии используется объект define property который позволяет на модели навесить геттеры и сеттеры и следить за изменением или за получением той или иной модели мы же рассмотрим сейчас визуальный пример именно для view 3 версии конечно же модель будет упрощенная поскольку тема достаточно обширная и обсуждать ее можно долго и так есть некоторая модель которая возвращается из функций дейта view под капотом оборачивает каждую из моделей в объект roxy если говорить кратко to view позволяет
00:04:11 - 00:05:17
навесить некоторые ловушки на модель например получение этой модели изменении какого-то поля у объекта добавление нового элемента в массив и так далее и в момент когда одна из этих ловушек отрабатывает выполняются определенные действия например в упрощенной модели при изменении значения модели view под капотом вызывает render функцию и мы видим обновленный интерфейс с обновлёнными данными пятый вопрос что такое композиция api во viewtrip тоже достаточно обширная тема для обсуждений но если говорить кратко это нововведение
00:04:44 - 00:05:51
в you try которая позволяет добиться еще больше перри используемости кода и при этом хранить реактивные данные отдельно от компонентов что позволит создавать реактивные перри используемые куски кода при этом делать это более гибко чем те же миксины назовите особенности использования вима долго view второй и третьей версии соответственно во вью второй версии можно использовать всего один 2 модуль по умолчанию и модуль работает с атрибутом целью поскольку в моду позволяет организовать двустороннее
00:05:17 - 00:06:22
связывание также необходимо прослушивать некоторые события по умолчанию во вью второй версии это событие он input во вью третьей версии мы можем использовать столько we моду сколько нам необходимо при этом можно использовать в моду с указанием явного названия атрибута и название этого атрибута указывается через : если же название атрибута не указывать то во вью третьей версии по умолчанию это будет моделью обратите внимание на то что во вью второй версии атрибут по умолчанию называется просто вэлью этот момент стоит учитывать во вью
00:05:50 - 00:06:57
второй версии для того чтобы модель изменять компонент который мы мы применяем в моду должен иметь событие input во вью третьей версии работает это несколько иначе для того чтобы изменить значение модели нам необходимо иметь события которое задается по шаблону апдейт двоеточие и название модели если название атрибутом и не указали то тогда иметь им события апдейт : моделью и сразу же возникает следующий вопрос для чего нужен как раз тот самый и мид рассмотрим на примере есть родительский компонент и есть дочерние из
00:06:24 - 00:07:34
родительского компонентов дочерние мы можем передавать какие-то данные с помощью props например можем передать список постов допустим в качестве родителя у нас выступает страница которой организована работа с постами а в качестве ребенка в данном случае форма которая позволяет создать новый пост внутри дочернего компонента мы создаем новый пост но передать его в родителя с помощью проб saw мы не можем поскольку передача данных происходит сверху вниз но при этом с помощью эммет в дочернем компоненте мы можем сгенерировать
00:06:59 - 00:08:02
некоторые события например назовем это событие a crate и аргументом она будет принимать как раз но вы созданы пост при этом родительский компонент на это событие может подписаться и указать некоторые обработчик функцию обратного вызова которая будет вызвана в тот момент когда событие будет сгенерировано view позволяет создавать сингл печь applications и следующий вопрос как раз из этого вытекает как организовать постраничную навигацию в сингл печь applications с помощью view для этого существует библиотека которая
00:07:30 - 00:08:35
называется view роутер с помощью нее мы можем создать некоторый роутер и указать в нем массив маршрутов при этом для каждого маршрута мы указываем путь и компонент который по этому пути должен отрисовывается после чего этот роутер мы регистрируем и для того чтобы монтировать компонент который отрисовывается по определенному пути используется компонент роутер view который также предоставляет эта библиотека а для постраничной навигации мы используем не стандартный html тег а а специальный компонент который называется
00:08:02 - 00:09:08
роутер link девятый вопрос что такое компьютер свойства и как они работают рассмотрим на примере есть некоторый счетчик кнопка которая этот счетчик увеличивает затем есть некоторый блок который выводит количество элементов в массиве и кнопка которая просто добавляет что-то в этот массив выглядит это примерно вот так при нажатии на кнопку увеличивается счетчик либо же добавляется элемент в массив теперь задача выводить вот в этот тэг h1 и длину массива а удвоенную длину массива пример выдуманы но суть в том что мы должны отобразить
00:08:35 - 00:09:42
результат некоторых вычислений для этого мы создадим функцию которая будет длину массива просто умножать на два и так же выведем влоги когда эта функция у нас вызвано чтобы сразу видеть что она отработала здесь теперь в шаблоне мы будем эту функцию вызывать и давайте посмотрим как это работает откроем браузер откроем консоль видим действительно удвоенное количество элементов в массиве но как можно заметить при изменении счетчика эта функция у нас каждый раз вызывается хотя при этом количество элементов в массиве
00:09:09 - 00:10:15
у нас оставалось прежним такой расклад нас не устраивает и мы хотим чтобы эта функция вызывалась только при изменении длины массива мы объявляем эту функцию как компьютер свойства и при этом шаблоне мы не пытаемся эту функцию вызвать обращаемся к ней как к объекту давайте обновим страницу и посмотрим как это работает теперь как видите при изменении счетчика функция у нас не вызывается она отрабатывает только в тот момент когда изменяется длина массива то есть вот этот лист является зависимостью при изменении которого
00:09:41 - 00:10:43
компьютер свойства вновь выполняется то есть компьютер свойства позволяют за кэшировать результат каких-то вычислений и эти вычисления повторяться вновь только в том случае если изменилось какая-то модель используемая внутри компьютерной ства в данном случае при изменении модели рей будет снова произведено фильтрация и мы увидим обновленные данные в иных случаях эта функция вызвано не будет и результат фильтрации мы будем получать из кэша десятый вопрос как отследить изменения модели опять же рассматриваем на примере
00:10:12 - 00:11:19
есть некоторые счетчик и кнопка при нажатии на которую этот счетчик изменяется и наша задача сделать так чтобы мы могли отслеживать изменения этого счетчика для этого предназначены наблюдаемый watch свойства мы создаем функцию которая называется точно так же как и модель параметрам она принимает новое значение попробуем вывести его влоги влогах напишем что произошло изменение каунтер и выведем значение самого кантора сохраним откроем браузер и как видим на каждое изменение аккаунты романос отрабатывает watch метод таким образом
00:10:46 - 00:11:57
мы можем наблюдать за изменением модели следующий вопрос особенности слежения за глубокими объектами той за изменением полей объекта за изменением вложенных объектов рассматриваем на примере у нас есть вот такой объект юзер него есть пару полей при этом есть вложенный объект адрес у которого из поля стрип и мы как ви модель этот стрит устанавливаем в input также мы сделали watch метод который должен отрабатывать на изменения юзер но как видите когда мы пишем что-то в input method не отрабатывает это как раз
00:11:22 - 00:12:28
связано с глубоким отслеживанием по дефолту это глубокое отслеживание не производится чтобы сделать глубокое отслеживание мы создаем одноименное поля юзер внутри указываем хендлер который будет отрабатывать на изменение модели и также добавляем поле deep со значением true и если мы напишем в input что-то сейчас то сразу увидим логе таким образом мы добились глубокого отслеживания и даже при изменении какого-то поля в объекте мы будем за ним наблюдать 12 вопрос что такое интерполяция интерполяция представляет из себя
00:11:55 - 00:13:03
простейшую форму привязки и позволяет нам шаблон выводить какие-либо данные тринадцатый вопрос как отрисовать компонент по условию опять же есть счетчик и два блока 1 блок и второй блок при этом первый блок я хочу отображать когда значение счетчика больше 3 а 2 когда меньше для этого можно воспользоваться директивой в iv которые мы указываем условие при котором блок должен отображаться и также есть директива в лс эта конструкция работает аналогично обычному условному оператору if else откроем браузер видим первый блок но как
00:12:28 - 00:13:42
только значение счетчика превышает 3 мы видим второй блок также можно использовать множественные условия для этого необходимо использовать директиву v-if которые также мы указываем другое условие при этом эта цепочка может быть сколь угодно большой и последний элемент в этой цепочке может заканчиваться навес как видите теперь у нас отображается по всем условиям три блока также для условной отрисовки используется директива we show и давайте рассмотрим как она используется как раз вот в следующем вопросе и обсудим разницу
00:13:06 - 00:14:14
между we show и воев с помощью в шоу мы также можем задать некоторые условия по которому блок будет отрисовывается но при этом был см и использовать уже не можем то есть для каждого блока необходимо задавать свое условие давайте откроем браузер откроем инспектор и посмотрим на расположение дом элементов можете заметить и первый и второй блок присутствует в дом дереве но при этом второй блок имеет стиль дисплей нан то есть он находится в дом дереве но мы его просто не видим в и в свою очередь полностью удаляет элемент из dom-дерева
00:13:40 - 00:14:51
когда условие не соблюдено 15 вопрос что такое миксины и как их использовать рассмотрим на визуальном примере есть некоторый компонент у которого есть свои данные свои методы компьютерной ства watch свойства есть некоторый mixing который представляет из себя по сути кусочек компонента некий перри используемый функционал и вот миксин объединяется с компонентом и тем самым добавлять в этот компонент новый функционал возвращаемся к нашему любимому счетчику и давайте тот же самый функционал вынесем в миксе создадим
00:14:16 - 00:15:24
отдельный файлик назовем его каунтер миксин отсюда экспортируем объект этот объект и будет являться миксина миксин можно добавлять все те же свойства которые есть у компонента например создадим модель каунтер и добавим еще один метод который этот каунтер будет инкрементировать здесь мы просто каунтер и добавляем единичку теперь попробуем этот миксин объединить с нашим компонентом эту дату мы уже вынесли в миксин поэтому можем смело и и удалять для того чтобы добавить mixing используем свойствами ксенз и через
00:14:52 - 00:15:58
запятую в массиве мы используем ее миксины просто передаем видите теперь внутри компонента нам доступен и счетчик и функция инкремент обновим страницу и увидим что работает все так же как и работала но при этом часть логике мы вынесли в миксин что такое директивы директивы во вью это специальные атрибуты которые мы можем использовать внутри html шаблона компонента view для того чтобы тем или иным образом взаимодействует html тегами не только директивы обычно начинаются с буквы иви затем через дефис идет название самой
00:15:24 - 00:16:32
директивы директивы позволяют добавить дополнительную функциональность и сократить количество кода которая пишет разработчик как создать пользовательскую директиву особенности использования рассмотрим опять же на примере наш любимый счетчик и некоторый блок div с большим количеством текста для того чтобы появился scroll задача написать такую директиву которую можно использовать на любом большом блоке у которого есть scroll и при этом за этим scroll am наблюдать то есть создать перри используемый функционал скролла
00:15:58 - 00:16:57
создадим файлик назовем его визг ролл г.с. это будет собственно говоря наша директива отсюда по дефолту экспортируем объект каждый директивы есть методы жизненного цикла и два основных это mounted когда компонент был вмонтирован и on mount когда компонент был соответственно демонтирован аргументом они принимают сам элемент которому было применено директива попробуем этот элемент вывести влоги а также напишем какой из методов жизненного цикла сейчас отработал после создания дерек можно использовать локально в каком-то
00:16:28 - 00:17:43
из компонентов но по-хорошему и и зарегистрировать глобально это делается следующим образом у экземпляра нашего приложения вызываем функцию директив первым параметром указываем название директивы авторы передаем саму директиву теперь в компоненте но тот самый блок с большим количеством текстом эту директиву добавляем открываем браузер открываем консоль видим влогах сообщение что отработал метод жизненного цикла mounted и дом элемент который к кратно который как раз мы директиву и повесили также в эту директиву мы можем
00:17:08 - 00:18:17
передавать какие-то данные нашем случае нам необходимо передать вот эту функцию чтобы она отрабатывала в тот момент когда мы сделали scroll теперь вопрос как эту функцию получить внутри директивы для этого есть второй аргумент который чаще всего называют биндинг и давайте также выведем влоги и посмотрим что там внутри итак мы видим некоторый объект у которого есть интересующая нас поля целью это как раз та самая функция которую мы передали соответственно эту функцию мы значит на какое-то событие
00:17:43 - 00:18:40
можем вызывать поскольку мы хотим работать со скролла mta вешаем слушатель события он scroll и вызываем функцию которую передали как вылью в эту директиву а в методе жизненного цикла он mounted мы от этого события условно просто отписываемся откроем браузер и посмотрим как это работает при пролистывании страницы как видите у нас увеличивается значение счетчика то есть мы сделали перри используемый функционал и при этом эту директиву мы можем использовать на любом блоке восемнадцатый вопрос о жизненном
00:18:12 - 00:19:18
цикле компонента view весь жизненный цикл можно поделить на несколько этапов первый этап это инициализация инициализируются события и сам жизненный цикл при этом за всем жизненным циклом с помощью специальных лайса клыков функций мы можем следить на этом этапе вызывается lifecycle fuck by far cray следующий этап это инициализация реактивности и некоторых инъекций на данном этапе вызывается love sac хук rated после чего идет монтирование компонента при этом вызываются 2 life cycle коби форма und и mounted соответственно
00:18:45 - 00:19:59
думаю по названием понятно что и когда вызывается на данном этапе рекомендуется делать различные запросы к серверу сайт эффекты и первичную ниц и а лиза цию поскольку компонент уже готов к использованию следующим этапом идет обновление компонента из этим мы также можем наблюдать изменилось значение какой-то модели и в этот момент вызываются два хука be for апдейт и апдейт и последний этап это демонтирования компонента на данном этапе компонент демонтируется из дом дерево и вызываются два хука before on mount и on mount тут
00:19:21 - 00:20:30
здесь рекомендуется делать различную очистку удалять какие-то слушатели события и вот такие вот этапы жизненного цикла содержит каждый компонент view каком методе жизненного цикла необходимо делать первичную загрузку данных сервера для этого предназначен life сайкл хук mounted и первичную инициализацию рекомендуется делать именно здесь в каком методе жизненного цикла необходимо делать очистку удалять слушатели очищать глобальное хранилище и так далее для этого предназначен lifecycle how can mounted
00:19:56 - 00:21:03
который вызывается в тот момент когда компонент был демонтирован как сделать стиле локальными для конкретного компонента при написании компонентов с помощью подхода single file компонент для стилей достаточно добавить флага скаут двадцать второй вопрос как отрисовать несколько компонентов на основе массива есть некоторый массив объектов у которых есть айдишники название для того чтобы отрисовать данные на основании массива используется директива we ford это некоторый цикл где на каждой итерации мы
00:20:29 - 00:21:37
получаем некоторый элемент из массива лист при этом этот элемент будет доступен внутри блока можем получить айдишник а его название также при использовании циклов необходимо использовать атрибут kay чуть позже мы о нём поговорим вот такой вот список по итогу у нас получился и следующий вопрос вытекает из предыдущего зачем нужен тот самый атрибут ки при использовании директивы we for начну немного издалека поскольку view под капотом использует virtual до это некоторая более легковесная копия обычного дом дерево в браузере поскольку
00:21:03 - 00:22:11
операции над дом деревом очень ресурсозатратно используется как раз вот виртуа дом более легковесная копия и каждый узел представляет из себя венок это некоторый объект созданный разработчиками view внутри используется достаточно сложный механизм который накапливает некоторое количество изменений и сразу пачкой переносит эти изменения в дом дерево все хорошо но если появляются списке которые состоят из 100 элементов 1000 элементов то процесс оптимизации немного усложняется потому что идентифицировать один элемент
00:21:37 - 00:22:46
из большого списка и увидеть какое изменение в этом элементе произошло достаточно сложно так вот специальная 3 будки в первую очередь нужен в качестве подсказки для view и его алгоритмы виртуального дом чтобы сравнить измененный список с обновленными элементами со старым списком и сделать отрисовку то есть перед enduring только тех участков которые действительно изменились view будет по максимуму стараться минимизировать вот эти вот перемещения манипуляции с дом объектами именно поэтому рекомендуется указывать
00:22:11 - 00:23:17
колючки и при этом он должен быть уникальным не рекомендуется использовать индекса элемента массива поскольку элементы могут удаляться и индексы при этом будут смещаться айдишник должен быть всегда статичным и уникальным чаще всего рекомендуется брать айди из объекта на основании которого и строится этот список мы научились следить за объектами но мы следим за изменением любого поля объекта так вот вопрос как отследить изменение конкретного поля у объекта опять же пример с юзерам адресом и и мпу там которые этот
00:22:44 - 00:23:53
адрес изменяет давайте попробуем отследить изменения конкретно улице для этого в поле watch мы создаем по особому шаблону функцию указываем название вот таким вот образом через точку получаем нужное нам поле и выведем его значения в логе откроем браузер попробуем написать что-нибудь в пути и видим текущее значение поля street как добавить слушатель события элемент здесь все просто для этого используется директива we он либо же более краткая запись где указывается собака после чего название события
00:23:19 - 00:24:31
что такое модификаторы модификаторы это некоторые дополнения для директивы которая позволяет изменить поведение этой директивы чаще всего используется для vi модель и для событий ки модификаторы есть у событий когда мы вешаем слушатель события мы также можем указать некоторые модификаторы самые часто используемые это стоп и prevent стоп позволяет сразу же вызвать функцию стоп про повешен а prevent позволяет отменить действие браузера по умолчанию и вызвать функцию prevent дефолт модификатор vans позволит отработать
00:23:54 - 00:25:10
событию лишь единожды также мы можем отследить нажатии какой-то кнопки например control или alt при этом модификаторы можно чинить то есть вызывать их по цепочке полный список модификаторов для событий вы можете увидеть сейчас на слайде вас с какие модификаторы есть у в моду рассмотрим на примере есть вот такой input и и моделька которая с ним связано и уве модуль есть три модификатора намбер лийзи и 3 давайте посмотрим как работает намбер когда мы вводим какие-то цифры в input как видите значение в
00:24:33 - 00:25:50
самой модели сразу же преобразовывается к числу trim работает как и обычная функция 3d острог то есть если мы добавим кучу каких-то пробелов начало и конец строки они просто удаляться и про игнорируются если 3-ем убрать и попробовать добавить пробелы как видите в саму модель они также уходят и последний модификатор лезем по умолчанию в пути we модуль работает событием input blaze позволяет это поведение изменить и по умолчанию сделать работу с он чинишь 29 вопрос как добавить анимацию на удалении добавления
00:25:13 - 00:26:19
элементов список есть вот такой вот интерфейс при нажатии на кнопку добавить в массив добавляется новый элемент в принципе все логично откроем документацию и на примере посмотрим как реализовать анимации для списков элемент на котором мы используем by for рекомендуется обернуть в компонент транзишен групп этот компонент нам предоставляет view давайте так и поступим там скопируем здесь ставим и так закроем то есть мы обернули наш div в компонент транзишен групп также у него должно быть название и можно указать ток который
00:25:46 - 00:26:53
используется внутри нашем случае это div остается скопировать стиле название классов и текстиль именуется особым образом сейчас все рассмотрим анимация проходит несколько стадий когда она активна и когда анимация закончилась и соответственно можно отследить добавление элемента в список и удаление элемента соответственно enter элиф и теперь давайте посмотрим как это работает при добавлении нового элемента в список происходит вот такая плавная анимация допустим я хочу чтобы элемент заезжал по оси x пробуем добавить новый элемент и
00:26:20 - 00:27:29
теперь анимация выглядит вот так как зарегистрировать компонент во viewtrip глобально для этого у инст винса приложения необходимо вызвать функцию компонент который первым параметром мы передаем название компонента а вторым параметром сам компонент тридцать первый вопрос как передать данные из родительского компонента в дочерние не используя пропсы и глобальное хранилище есть вот такой компонент и в нем используется другой компонент который называется child в родительском компоненте есть некоторые
00:26:54 - 00:27:59
данные а именно информация пользователя задача отобразить эти данные в дочернем компоненте не используя пропсы для этого во вью есть механизм который называется pro white inject в родительском компоненте мы пройдем некоторые данные в данном случае нашего пользователя а в дочернем компоненте необходимо сделать инъекцию то есть эти данные как бы внедрить в этот компонент делается это следующим образом откроем браузер и убедимся в том что данные отобразились подобные инъекции можно делать игнорируя цепочку компонентов и
00:27:28 - 00:28:35
передавать данные на сколь угодно глубокую вложенность 32 вопрос как добавить классный элемент по условию есть кнопка которая меняет значение модели the gale на обратное тру на фолс фолз натру и есть некоторые стили а именно класс green который устанавливает цвет заднего фона в зеленый то есть задача при нажатии на эту кнопку менять по условию класс на корневом блоки делается это следующим образом мы бензин некоторый объект которым как ключ указываем название класса а как значение условия по которому этот класс должен
00:28:02 - 00:29:11
отрисовывается как видите теперь при нажатии на кнопку цвет заднего фона у нас меняется как динамически изменять стили у элемента опять же есть некоторая кнопка которая меняет значение цвета с красного на зеленый и зеленого на красный задача навешивать динамический онлайн стиль который будет менять значение заднего фона точно таким же образом мы бензин стиле как ключ указываем css свойства и как значение указываем то чему это свойство равно в нашем случае этот свет как видите при нажатии на кнопку цвет
00:28:36 - 00:29:42
заднего фона действительно меняется таким образом мы добились динамических стилей 34 вопрос расскажите о салатах во вью лучше всего рассмотреть на примере у нас есть компонент карт который просто представляет из себя некоторую обертку со стилями рамка и так далее и в эту обертку мы хотим поместить какие-то другие элементы какой-то текст давайте попробуем написать текст и как видите карт остается по-прежнему пустым все дело в том что view по умолчанию не знает куда добавлять содержимое для этого используются как раз slade и как
00:29:10 - 00:30:15
видите теперь текст появился он добавляется именно в этот слот девы этот слот укажите туда данные и будут добавляться также view предоставляет возможность делать множественные слоты и для этого необходимо указать у них название этот слот будет для заголовка нашей карточки также сделаем блок который будет содержать в себе контентную часть и в этом блоке мы сделаем отступ сверху 20 пикселей внутри этого блока мы поместьем слот и название для него сделаем как body то есть тело карточки и последний блок будет для кнопок например
00:29:42 - 00:30:54
кнопка отмените кнопка сохранить назовем слот actions также сделаем отступ сверху 15 пикселей и добавим majin left outer чтобы кнопки были с правой стороны карточки теперь попробуем в эти слоты что-нибудь поместить это делается следующим образом создается template и в нем указывается название слата off to comply там нам сразу подсказывает теперь все что внутри этого темплейт а мы поместим будет добавляться в соответствующий слот с соответствующим названием здесь укажем как название body откроем
00:30:18 - 00:31:29
браузер и выглядит это примерно вот так ну и добавим еще пару кнопочек в слот actions таким образом с помощью слотов мы можем задавать некоторые каркас некоторую структуру нашего компонента которую можно встраивать другие элементы 35 вопрос каким способом можно получить доступ к дом элементу во вью есть кнопка и input и задача при нажатии на кнопку получить доступ к дом элементу вот этого input а для этого во вью используются референса указываем название референса и к нему теперь мы можем обращаться внутри компонента
00:30:53 - 00:32:05
создадим функцию детров сделаем консоль лоб и чтобы получить reference мы используем следующий синтаксис называем название референсом на кнопку вешаем слушатель события не вызываем функцию метров нажимаем на кнопку и получаем дом элемент рим пута таким образом можно сделать например фокус на этот input вызываем функцию фокус и теперь при нажатии на кнопку как видите фокус перемещается прямо на input 36 вопрос зачем нужен keep-alive во вью и так есть две кнопки и два компонента компоненты абсолютно идентичные за
00:31:29 - 00:32:46
исключением вот этой надписи каждом из компонентов есть свой счетчик и кнопка которая этот счетчик изменяет второй компонент как видите выглядит точно так же и первые 2 компоненты зарегистрированы в родительском компоненте и также есть некоторая модель которая в себе хранить название этих компонентов при этом при нажатии на кнопки мы эти названия изменяем на соответствующий при этом во вью есть возможность динамически компоненты перерисовывать и делается это следующим образом используем стандартный компонент
00:32:08 - 00:33:11
который так и называется и используем отъебут из как видите теперь при нажатии на кнопку у нас отрисовывается либо 1 либо 2 но при этом при смене компонента значение в счетчике у нас обнуляется поскольку компонент каждый раз монтируется заново для этого и нужен компонент keep-alive который позволяет компонент на этом этапе сохранять как видите теперь счетчик не обнуляется и компонент у нас не демонтируется он живет вечно телепорт его view зачем они нужны и как используются и так есть пустой компонент давайте создадим
00:32:39 - 00:33:48
некоторую иерархию блоков сделаем несколько вложенных дивов и напишем в одном из них что-нибудь поскольку мы используем один компонент в другом формируется некоторые иерархия каждый компонент вложен в другой на основании этой вложенности формируется дом дерево и в некоторых случаях элемент нам необходимо переместить из одного места там дерево в другой для этого используются телепорты допустим переместим вот этот вот блок с текстом самый корень страницы в боди для этого этот блок вырежем и поместим
00:33:14 - 00:34:18
внутрь телепорту сохраняем откроем инспектор посмотрим на иерархию вот этих дивов и нужный нам блок мы здесь не найдем но этот блок есть в корне как раз внутри body в самом самом низу как подключить внешний плагин во view 3 для регистрации внешнего плагина используется функция юз у экземпляра нашего приложения как создать свой собственный плагин во viewtrip для этого необходимо создать объект у которого будет метод install внутри него можно подключать различные кастомные директивы миксе иные компоненты
00:33:47 - 00:35:03
делать различную настройку и так далее при этом подключение этого плагина будет также с помощью функцию у экземпляра приложения 40 вопрос есть некоторый компонент и некоторые миксины при использовании хуков жизненного цикла таких как mounted created on mounted внутри миксина и при подключении этого миксина в компонент то в какой последовательности будут вызываться хуки сначала компонента или же сначала миксина а если этих миксин несколько то как это все будет чередоваться и в какой последовательности выполняться
00:34:24 - 00:35:31
рассмотрим на примере есть некоторый компонент и давайте создадим миксин внутри миксина воспользуемся life сайкл хуком mounted и выведем здесь консоль мог о том что отработал первый миксин создадим еще один такой миксин ставим сюда код из первого и единственного замене влоги теперь подключим эти миксины в компонент один за одним сначала первый миксин затем 2 и внутри компонента также сделаем lifecycle хук mounted но здесь в логах уже напишем что отработал lifecycle хук именно компонента откроем браузер и посмотрим в
00:34:58 - 00:36:15
какой последовательности они выделились откроем консоль как видите сначала отработали поочередно миксины и только потом компонент почему не стоит использовать в качестве ключей индекса элемента массива ключ всегда должен быть связан с элементом массива не должен изменяться по хорошему чтобы это был какой-то уникальный айти потому что при удалении перестановки элементов в массиве яндекс и элемент с которым он был сопоставлен нарушается то есть один индекс может относиться уже совсем к другому элементу при этом пропадает
00:35:37 - 00:36:41
эффективность использования ключей и алгоритм который работает с virtual дом работает некорректно 42 вопрос почему этот код не работает рассмотрим на примере есть некоторые список основанный на массиве есть кнопка при нажатии на которую вызывается функция filter здесь мы делаем фильтрацию поэтому массиву и оставляем только нечетные элементы откроем браузер и попробуем нажать на кнопку как видите никакая фильтрация не происходит это частая ошибка новичков которые не знают о том что функция filter возвращает новый массив и массив
00:36:09 - 00:37:20
который возвращает функция filter необходимо заново положить в лист как видите теперь остаются только нечетные числа можно ли использовать vi iv и vi ford на одном элементе объясните свой ответ в документации рекомендация в которой написано избегать использования vi-iv вв for помечено отметкой важно для фильтрации рекомендуется использовать компьютер свойства которые возвращают уже отфильтрованный список или если же необходимо скрыть весь список целиком итоги iv рекомендуют переносить на элемент выше то есть вот такой вот
00:36:45 - 00:37:54
вариант является плохим и так делать не стоит а вот один из этих вариантов можно смело использовать причем active users это как раз компьют свойства 44 вопрос можно ли изменять компьютер свойства изменять напрямую значение компьют свойства не рекомендуется необходимо изменить одну из зависимости которая используется внутри этого свойства или же создать новую компьютер функцию которая будет внутри себя работать с другой компьютер функцией для чего нужен view x и какие проблемы он решает начну с того что view x это поттер для
00:37:19 - 00:38:30
управления состоянием и он служит централизованным хранилищем данных для всех компонентов при этом мы избавляемся от необходимости передавать данные по иерархии сверху вниз есть некоторое глобальное хранилище и любой компонент может получать из него данные на слайде вы это можете прекрасно увидеть view x гарантирует что состояние может быть изменено только предсказуемым образом а именно с помощью мутаций и экшенов расскажите о state и guitars во вью x г x использует единое дерево состоянии это тот случай когда один объект содержит
00:37:54 - 00:39:06
все состояние приложения и служит единственным источником истины это также означает что в приложение будет только одно хранилище state мы храним данные из которой нам предстоит работать гетеры же в свою очередь это некоторые компьютеры свойства аналогичные свойства мисс компонента внутри себя они производят какие-то вычисления над данными которые находятся в состоянии и аналогичным образом кэширует результат до тех пор пока одна из зависимости не изменится расскажите о мутациях и экшенах во вью x в чем их отличие
00:38:30 - 00:39:40
мутации во вью x являются единственным способом изменить состояние по сути мутация представляет из себя просто функцию которая внутри себя изменяет какие-то поля из состояния мутации позволяют сделать процесс изменения состояния более прозрачным и явным экшен и похоже на мутации но есть некоторые отличия экшен и содержат себе некоторые сайт эффекты и запросы на сервер таймеры но при этом внутри себя экшен и вызывают мутации для того чтобы как-то изменить состояние при этом мутации всегда являются синхронными и не могут
00:39:05 - 00:40:17
содержать какую-то асинхронную логику свою очередь экшены как раз по большей части для синхронных действий и предназначены так использовать сторону три компонента после того как мы глобально зарегистрировали сторону нашем приложении внутри любого компонента мы можем обратиться к нему вот таким вот способом при этом с помощью специальных методов мы можем вызывать мутации экшены обращаться к state у и использовать геттеры также во вью x есть специальные функции которые позволяют в компонент завопить state геттеры экшены и мутации
00:39:41 - 00:40:50
при этом все зама блины и функции или данные будут доступны в данном компоненте 49 предпоследний вопрос как принудительно обновить компонент во вью рассмотрим на примере некоторый блок мы выводим рандомное число с помощью пакета масс как видите при обновлении страницы это число всегда разное и задача при нажатии на кнопку принудительно вызвать перед рендеринг компонента чтобы там отобразилось новое число при нажатии на кнопку будем вызывать функцию апдейт а для того чтобы обновить компонент во вью
00:40:15 - 00:41:17
есть специальная функция специальный метод который называется force апдейт как видите теперь при нажатии на кнопку у нас перерыл дерево its a component и заключительный вопрос для чего нужны асинхронные компоненты во view некоторых случаях при росте приложения банду финальная сборка приложения становится очень большой и возникает необходимость разделять приложение на меньшие части и загружать компоненты сервер только в тот момент когда они необходимы view предоставляет такую возможность и для этого предназначен
00:40:46 - 00:41:49
метод который называется define a sin компонент и на этом друзья мы заканчиваем надеюсь ролик вам был полезен вы действительно извлекли для себя что-то новое и интересное и он в кратчайшие сроки позволил вам подготовиться к собеседованию на patreon я закинул файл в котором я собрал более 200 вопросов по java script css view react общие вопросы по веб и при этом на каждый вопрос есть ответ и ссылка для более детального ознакомления если хочешь меня подержать а заодно извлечь пользу и получить экспресс справочник для подготовки к
00:41:18 - 00:42:30
собеседованию то тогда вэлком на patreon но хорошей поддержкой для меня будет и просто лайк и комментарий от тебя читаю каждый комментарий и жду именно твой 7 пока жду вас следующих роликах
приветствую вас друзья и в этом ролике мы подготовимся к собеседованию на view разработчика разберем 50 самых часто встречаемых вопросов и давайте сразу же приступим что такое двустороннее связывание у сторонние связывание позволяет динамически менять значения на одном конце привязки при изменениях на другом конце контексте view и вообще фронтэнда чаще всего под двухсторонним связыванием подразумевают связывание графического интерфейса с данными с которыми мы работаем рассмотрим вот такой визуальный
00:00:03 - 00:01:07
пример есть страница и некоторый view компонент которым есть одна модель e-mail и мы связываем значение которое находится в им пути с моделью е mail и таким образом мы добиваемся синхронизации и визуальное отображение всегда совпадает с данными с которыми мы работаем следующий вопрос какими способами можно реализовать двустороннее связывание для input рассмотрим на практическом примере есть input и есть некоторая модель которая называется input вылью необходимо реализовать двустороннее связывание
00:00:35 - 00:01:37
первый самый классический способ это как вылью передать модель и подписаться на события input и в обработчике этого события из вен в таргет достаем как раз вылью это текущее значение input а и помещаем это значение в модель таким образом у нас всегда значение в пути будет совпадать с моделью давайте в этом убедимся напишем что-нибудь в input как видим модель также изменяется это был классический способ который сработает не только во вью новью предоставляет удобный синтаксис который называется в
00:01:06 - 00:02:10
моду он позволяет точно таким же образом создать двустороннее связывание попробуем написать что-нибудь в пути и видим что модель также изменяется третий вопрос что такое props пропсы то некоторые входные параметры пользовательские атрибуты которые может принимать компонент рапса являются свойствами компонентой мы можем их использовать как как каких-то методов как в шаблоне так и в принципе в любом месте компонента список процессов которые ожидают компонент объявляются в свойстве props при этом их может быть
00:01:38 - 00:02:43
абсолютно любое количество с помощью проб saw мы можем использовать компонентный подход и передавать данные из родительских компонентов в дочерние четвертый вопрос как работает реактивность во вью начнем в принципе с определения реактивности реактивность это некоторая концепция которая позволяет приспосабливаться к изменениям данных декларативным способом то есть мы изменили какие-то данные в коде и сразу увидели их изменения на странице давайте рассмотрим такой небольшой пример если бы мы не использовали никакой
00:02:10 - 00:03:10
фреймворк у нас есть страница кнопка поставить лайк и некоторые счетчик которые количество лайков отображает данном случае у нас есть некоторый div и кнопка на кнопку мы вешаем слушайте в событие нажатия изменяя в ней значение счетчика при таком значении данные у нас изменяются то есть значение переменной k under у нас каждый раз инкрементироваться на единицу но при этом отображение на странице никак не изменяется для того чтобы при нажатии на кнопку видеть изменения нам необходимо напрямую руками
00:02:40 - 00:03:39
изменять текст нутри дива то есть мы сосредотачиваемся не только на логике по работе с данными а еще и над графическим визуальным представлением этих данных мы должны следить за тем чтобы эти данные на странице действительно изменялись рассмотрим подобный пример но уже в рамках view you являются реактивным фреймворком опять же есть блок div кнопка некоторая модель likes и при нажатии на кнопку мы эту модель инкрементируем то есть увеличиваем значение на единицу при этом при нажатии на кнопку мы работаем только с данными
00:03:10 - 00:04:10
напрямую с графическим отображением мы никак не взаимодействуем и если мы попробуем нажать на кнопку то интерфейс автоматически адаптируется под изменения данных такое поведение и называется как раз реактивностью теперь на простом примере поговорим о том как эта реактивность реализм вон какие механизмы позволяют отслеживать изменения данных и обновлять графический интерфейс сразу скажу что во вью второй версии его view 3 версии эти механизмы немного отличаются во вью третьей версии используется java скриптовый объект
00:03:40 - 00:04:42
рокси а во вью второй версии используется объект define property который позволяет на модели навесить геттеры и сеттеры и следить за изменением или за получением той или иной модели мы же рассмотрим сейчас визуальный пример именно для view 3 версии конечно же модель будет упрощенная поскольку тема достаточно обширная и обсуждать ее можно долго и так есть некоторая модель которая возвращается из функций дейта view под капотом оборачивает каждую из моделей в объект roxy если говорить кратко to view позволяет
00:04:11 - 00:05:17
навесить некоторые ловушки на модель например получение этой модели изменении какого-то поля у объекта добавление нового элемента в массив и так далее и в момент когда одна из этих ловушек отрабатывает выполняются определенные действия например в упрощенной модели при изменении значения модели view под капотом вызывает render функцию и мы видим обновленный интерфейс с обновлёнными данными пятый вопрос что такое композиция api во viewtrip тоже достаточно обширная тема для обсуждений но если говорить кратко это нововведение
00:04:44 - 00:05:51
в you try которая позволяет добиться еще больше перри используемости кода и при этом хранить реактивные данные отдельно от компонентов что позволит создавать реактивные перри используемые куски кода при этом делать это более гибко чем те же миксины назовите особенности использования вима долго view второй и третьей версии соответственно во вью второй версии можно использовать всего один 2 модуль по умолчанию и модуль работает с атрибутом целью поскольку в моду позволяет организовать двустороннее
00:05:17 - 00:06:22
связывание также необходимо прослушивать некоторые события по умолчанию во вью второй версии это событие он input во вью третьей версии мы можем использовать столько we моду сколько нам необходимо при этом можно использовать в моду с указанием явного названия атрибута и название этого атрибута указывается через : если же название атрибута не указывать то во вью третьей версии по умолчанию это будет моделью обратите внимание на то что во вью второй версии атрибут по умолчанию называется просто вэлью этот момент стоит учитывать во вью
00:05:50 - 00:06:57
второй версии для того чтобы модель изменять компонент который мы мы применяем в моду должен иметь событие input во вью третьей версии работает это несколько иначе для того чтобы изменить значение модели нам необходимо иметь события которое задается по шаблону апдейт двоеточие и название модели если название атрибутом и не указали то тогда иметь им события апдейт : моделью и сразу же возникает следующий вопрос для чего нужен как раз тот самый и мид рассмотрим на примере есть родительский компонент и есть дочерние из
00:06:24 - 00:07:34
родительского компонентов дочерние мы можем передавать какие-то данные с помощью props например можем передать список постов допустим в качестве родителя у нас выступает страница которой организована работа с постами а в качестве ребенка в данном случае форма которая позволяет создать новый пост внутри дочернего компонента мы создаем новый пост но передать его в родителя с помощью проб saw мы не можем поскольку передача данных происходит сверху вниз но при этом с помощью эммет в дочернем компоненте мы можем сгенерировать
00:06:59 - 00:08:02
некоторые события например назовем это событие a crate и аргументом она будет принимать как раз но вы созданы пост при этом родительский компонент на это событие может подписаться и указать некоторые обработчик функцию обратного вызова которая будет вызвана в тот момент когда событие будет сгенерировано view позволяет создавать сингл печь applications и следующий вопрос как раз из этого вытекает как организовать постраничную навигацию в сингл печь applications с помощью view для этого существует библиотека которая
00:07:30 - 00:08:35
называется view роутер с помощью нее мы можем создать некоторый роутер и указать в нем массив маршрутов при этом для каждого маршрута мы указываем путь и компонент который по этому пути должен отрисовывается после чего этот роутер мы регистрируем и для того чтобы монтировать компонент который отрисовывается по определенному пути используется компонент роутер view который также предоставляет эта библиотека а для постраничной навигации мы используем не стандартный html тег а а специальный компонент который называется
00:08:02 - 00:09:08
роутер link девятый вопрос что такое компьютер свойства и как они работают рассмотрим на примере есть некоторый счетчик кнопка которая этот счетчик увеличивает затем есть некоторый блок который выводит количество элементов в массиве и кнопка которая просто добавляет что-то в этот массив выглядит это примерно вот так при нажатии на кнопку увеличивается счетчик либо же добавляется элемент в массив теперь задача выводить вот в этот тэг h1 и длину массива а удвоенную длину массива пример выдуманы но суть в том что мы должны отобразить
00:08:35 - 00:09:42
результат некоторых вычислений для этого мы создадим функцию которая будет длину массива просто умножать на два и так же выведем влоги когда эта функция у нас вызвано чтобы сразу видеть что она отработала здесь теперь в шаблоне мы будем эту функцию вызывать и давайте посмотрим как это работает откроем браузер откроем консоль видим действительно удвоенное количество элементов в массиве но как можно заметить при изменении счетчика эта функция у нас каждый раз вызывается хотя при этом количество элементов в массиве
00:09:09 - 00:10:15
у нас оставалось прежним такой расклад нас не устраивает и мы хотим чтобы эта функция вызывалась только при изменении длины массива мы объявляем эту функцию как компьютер свойства и при этом шаблоне мы не пытаемся эту функцию вызвать обращаемся к ней как к объекту давайте обновим страницу и посмотрим как это работает теперь как видите при изменении счетчика функция у нас не вызывается она отрабатывает только в тот момент когда изменяется длина массива то есть вот этот лист является зависимостью при изменении которого
00:09:41 - 00:10:43
компьютер свойства вновь выполняется то есть компьютер свойства позволяют за кэшировать результат каких-то вычислений и эти вычисления повторяться вновь только в том случае если изменилось какая-то модель используемая внутри компьютерной ства в данном случае при изменении модели рей будет снова произведено фильтрация и мы увидим обновленные данные в иных случаях эта функция вызвано не будет и результат фильтрации мы будем получать из кэша десятый вопрос как отследить изменения модели опять же рассматриваем на примере
00:10:12 - 00:11:19
есть некоторые счетчик и кнопка при нажатии на которую этот счетчик изменяется и наша задача сделать так чтобы мы могли отслеживать изменения этого счетчика для этого предназначены наблюдаемый watch свойства мы создаем функцию которая называется точно так же как и модель параметрам она принимает новое значение попробуем вывести его влоги влогах напишем что произошло изменение каунтер и выведем значение самого кантора сохраним откроем браузер и как видим на каждое изменение аккаунты романос отрабатывает watch метод таким образом
00:10:46 - 00:11:57
мы можем наблюдать за изменением модели следующий вопрос особенности слежения за глубокими объектами той за изменением полей объекта за изменением вложенных объектов рассматриваем на примере у нас есть вот такой объект юзер него есть пару полей при этом есть вложенный объект адрес у которого из поля стрип и мы как ви модель этот стрит устанавливаем в input также мы сделали watch метод который должен отрабатывать на изменения юзер но как видите когда мы пишем что-то в input method не отрабатывает это как раз
00:11:22 - 00:12:28
связано с глубоким отслеживанием по дефолту это глубокое отслеживание не производится чтобы сделать глубокое отслеживание мы создаем одноименное поля юзер внутри указываем хендлер который будет отрабатывать на изменение модели и также добавляем поле deep со значением true и если мы напишем в input что-то сейчас то сразу увидим логе таким образом мы добились глубокого отслеживания и даже при изменении какого-то поля в объекте мы будем за ним наблюдать 12 вопрос что такое интерполяция интерполяция представляет из себя
00:11:55 - 00:13:03
простейшую форму привязки и позволяет нам шаблон выводить какие-либо данные тринадцатый вопрос как отрисовать компонент по условию опять же есть счетчик и два блока 1 блок и второй блок при этом первый блок я хочу отображать когда значение счетчика больше 3 а 2 когда меньше для этого можно воспользоваться директивой в iv которые мы указываем условие при котором блок должен отображаться и также есть директива в лс эта конструкция работает аналогично обычному условному оператору if else откроем браузер видим первый блок но как
00:12:28 - 00:13:42
только значение счетчика превышает 3 мы видим второй блок также можно использовать множественные условия для этого необходимо использовать директиву v-if которые также мы указываем другое условие при этом эта цепочка может быть сколь угодно большой и последний элемент в этой цепочке может заканчиваться навес как видите теперь у нас отображается по всем условиям три блока также для условной отрисовки используется директива we show и давайте рассмотрим как она используется как раз вот в следующем вопросе и обсудим разницу
00:13:06 - 00:14:14
между we show и воев с помощью в шоу мы также можем задать некоторые условия по которому блок будет отрисовывается но при этом был см и использовать уже не можем то есть для каждого блока необходимо задавать свое условие давайте откроем браузер откроем инспектор и посмотрим на расположение дом элементов можете заметить и первый и второй блок присутствует в дом дереве но при этом второй блок имеет стиль дисплей нан то есть он находится в дом дереве но мы его просто не видим в и в свою очередь полностью удаляет элемент из dom-дерева
00:13:40 - 00:14:51
когда условие не соблюдено 15 вопрос что такое миксины и как их использовать рассмотрим на визуальном примере есть некоторый компонент у которого есть свои данные свои методы компьютерной ства watch свойства есть некоторый mixing который представляет из себя по сути кусочек компонента некий перри используемый функционал и вот миксин объединяется с компонентом и тем самым добавлять в этот компонент новый функционал возвращаемся к нашему любимому счетчику и давайте тот же самый функционал вынесем в миксе создадим
00:14:16 - 00:15:24
отдельный файлик назовем его каунтер миксин отсюда экспортируем объект этот объект и будет являться миксина миксин можно добавлять все те же свойства которые есть у компонента например создадим модель каунтер и добавим еще один метод который этот каунтер будет инкрементировать здесь мы просто каунтер и добавляем единичку теперь попробуем этот миксин объединить с нашим компонентом эту дату мы уже вынесли в миксин поэтому можем смело и и удалять для того чтобы добавить mixing используем свойствами ксенз и через
00:14:52 - 00:15:58
запятую в массиве мы используем ее миксины просто передаем видите теперь внутри компонента нам доступен и счетчик и функция инкремент обновим страницу и увидим что работает все так же как и работала но при этом часть логике мы вынесли в миксин что такое директивы директивы во вью это специальные атрибуты которые мы можем использовать внутри html шаблона компонента view для того чтобы тем или иным образом взаимодействует html тегами не только директивы обычно начинаются с буквы иви затем через дефис идет название самой
00:15:24 - 00:16:32
директивы директивы позволяют добавить дополнительную функциональность и сократить количество кода которая пишет разработчик как создать пользовательскую директиву особенности использования рассмотрим опять же на примере наш любимый счетчик и некоторый блок div с большим количеством текста для того чтобы появился scroll задача написать такую директиву которую можно использовать на любом большом блоке у которого есть scroll и при этом за этим scroll am наблюдать то есть создать перри используемый функционал скролла
00:15:58 - 00:16:57
создадим файлик назовем его визг ролл г.с. это будет собственно говоря наша директива отсюда по дефолту экспортируем объект каждый директивы есть методы жизненного цикла и два основных это mounted когда компонент был вмонтирован и on mount когда компонент был соответственно демонтирован аргументом они принимают сам элемент которому было применено директива попробуем этот элемент вывести влоги а также напишем какой из методов жизненного цикла сейчас отработал после создания дерек можно использовать локально в каком-то
00:16:28 - 00:17:43
из компонентов но по-хорошему и и зарегистрировать глобально это делается следующим образом у экземпляра нашего приложения вызываем функцию директив первым параметром указываем название директивы авторы передаем саму директиву теперь в компоненте но тот самый блок с большим количеством текстом эту директиву добавляем открываем браузер открываем консоль видим влогах сообщение что отработал метод жизненного цикла mounted и дом элемент который к кратно который как раз мы директиву и повесили также в эту директиву мы можем
00:17:08 - 00:18:17
передавать какие-то данные нашем случае нам необходимо передать вот эту функцию чтобы она отрабатывала в тот момент когда мы сделали scroll теперь вопрос как эту функцию получить внутри директивы для этого есть второй аргумент который чаще всего называют биндинг и давайте также выведем влоги и посмотрим что там внутри итак мы видим некоторый объект у которого есть интересующая нас поля целью это как раз та самая функция которую мы передали соответственно эту функцию мы значит на какое-то событие
00:17:43 - 00:18:40
можем вызывать поскольку мы хотим работать со скролла mta вешаем слушатель события он scroll и вызываем функцию которую передали как вылью в эту директиву а в методе жизненного цикла он mounted мы от этого события условно просто отписываемся откроем браузер и посмотрим как это работает при пролистывании страницы как видите у нас увеличивается значение счетчика то есть мы сделали перри используемый функционал и при этом эту директиву мы можем использовать на любом блоке восемнадцатый вопрос о жизненном
00:18:12 - 00:19:18
цикле компонента view весь жизненный цикл можно поделить на несколько этапов первый этап это инициализация инициализируются события и сам жизненный цикл при этом за всем жизненным циклом с помощью специальных лайса клыков функций мы можем следить на этом этапе вызывается lifecycle fuck by far cray следующий этап это инициализация реактивности и некоторых инъекций на данном этапе вызывается love sac хук rated после чего идет монтирование компонента при этом вызываются 2 life cycle коби форма und и mounted соответственно
00:18:45 - 00:19:59
думаю по названием понятно что и когда вызывается на данном этапе рекомендуется делать различные запросы к серверу сайт эффекты и первичную ниц и а лиза цию поскольку компонент уже готов к использованию следующим этапом идет обновление компонента из этим мы также можем наблюдать изменилось значение какой-то модели и в этот момент вызываются два хука be for апдейт и апдейт и последний этап это демонтирования компонента на данном этапе компонент демонтируется из дом дерево и вызываются два хука before on mount и on mount тут
00:19:21 - 00:20:30
здесь рекомендуется делать различную очистку удалять какие-то слушатели события и вот такие вот этапы жизненного цикла содержит каждый компонент view каком методе жизненного цикла необходимо делать первичную загрузку данных сервера для этого предназначен life сайкл хук mounted и первичную инициализацию рекомендуется делать именно здесь в каком методе жизненного цикла необходимо делать очистку удалять слушатели очищать глобальное хранилище и так далее для этого предназначен lifecycle how can mounted
00:19:56 - 00:21:03
который вызывается в тот момент когда компонент был демонтирован как сделать стиле локальными для конкретного компонента при написании компонентов с помощью подхода single file компонент для стилей достаточно добавить флага скаут двадцать второй вопрос как отрисовать несколько компонентов на основе массива есть некоторый массив объектов у которых есть айдишники название для того чтобы отрисовать данные на основании массива используется директива we ford это некоторый цикл где на каждой итерации мы
00:20:29 - 00:21:37
получаем некоторый элемент из массива лист при этом этот элемент будет доступен внутри блока можем получить айдишник а его название также при использовании циклов необходимо использовать атрибут kay чуть позже мы о нём поговорим вот такой вот список по итогу у нас получился и следующий вопрос вытекает из предыдущего зачем нужен тот самый атрибут ки при использовании директивы we for начну немного издалека поскольку view под капотом использует virtual до это некоторая более легковесная копия обычного дом дерево в браузере поскольку
00:21:03 - 00:22:11
операции над дом деревом очень ресурсозатратно используется как раз вот виртуа дом более легковесная копия и каждый узел представляет из себя венок это некоторый объект созданный разработчиками view внутри используется достаточно сложный механизм который накапливает некоторое количество изменений и сразу пачкой переносит эти изменения в дом дерево все хорошо но если появляются списке которые состоят из 100 элементов 1000 элементов то процесс оптимизации немного усложняется потому что идентифицировать один элемент
00:21:37 - 00:22:46
из большого списка и увидеть какое изменение в этом элементе произошло достаточно сложно так вот специальная 3 будки в первую очередь нужен в качестве подсказки для view и его алгоритмы виртуального дом чтобы сравнить измененный список с обновленными элементами со старым списком и сделать отрисовку то есть перед enduring только тех участков которые действительно изменились view будет по максимуму стараться минимизировать вот эти вот перемещения манипуляции с дом объектами именно поэтому рекомендуется указывать
00:22:11 - 00:23:17
колючки и при этом он должен быть уникальным не рекомендуется использовать индекса элемента массива поскольку элементы могут удаляться и индексы при этом будут смещаться айдишник должен быть всегда статичным и уникальным чаще всего рекомендуется брать айди из объекта на основании которого и строится этот список мы научились следить за объектами но мы следим за изменением любого поля объекта так вот вопрос как отследить изменение конкретного поля у объекта опять же пример с юзерам адресом и и мпу там которые этот
00:22:44 - 00:23:53
адрес изменяет давайте попробуем отследить изменения конкретно улице для этого в поле watch мы создаем по особому шаблону функцию указываем название вот таким вот образом через точку получаем нужное нам поле и выведем его значения в логе откроем браузер попробуем написать что-нибудь в пути и видим текущее значение поля street как добавить слушатель события элемент здесь все просто для этого используется директива we он либо же более краткая запись где указывается собака после чего название события
00:23:19 - 00:24:31
что такое модификаторы модификаторы это некоторые дополнения для директивы которая позволяет изменить поведение этой директивы чаще всего используется для vi модель и для событий ки модификаторы есть у событий когда мы вешаем слушатель события мы также можем указать некоторые модификаторы самые часто используемые это стоп и prevent стоп позволяет сразу же вызвать функцию стоп про повешен а prevent позволяет отменить действие браузера по умолчанию и вызвать функцию prevent дефолт модификатор vans позволит отработать
00:23:54 - 00:25:10
событию лишь единожды также мы можем отследить нажатии какой-то кнопки например control или alt при этом модификаторы можно чинить то есть вызывать их по цепочке полный список модификаторов для событий вы можете увидеть сейчас на слайде вас с какие модификаторы есть у в моду рассмотрим на примере есть вот такой input и и моделька которая с ним связано и уве модуль есть три модификатора намбер лийзи и 3 давайте посмотрим как работает намбер когда мы вводим какие-то цифры в input как видите значение в
00:24:33 - 00:25:50
самой модели сразу же преобразовывается к числу trim работает как и обычная функция 3d острог то есть если мы добавим кучу каких-то пробелов начало и конец строки они просто удаляться и про игнорируются если 3-ем убрать и попробовать добавить пробелы как видите в саму модель они также уходят и последний модификатор лезем по умолчанию в пути we модуль работает событием input blaze позволяет это поведение изменить и по умолчанию сделать работу с он чинишь 29 вопрос как добавить анимацию на удалении добавления
00:25:13 - 00:26:19
элементов список есть вот такой вот интерфейс при нажатии на кнопку добавить в массив добавляется новый элемент в принципе все логично откроем документацию и на примере посмотрим как реализовать анимации для списков элемент на котором мы используем by for рекомендуется обернуть в компонент транзишен групп этот компонент нам предоставляет view давайте так и поступим там скопируем здесь ставим и так закроем то есть мы обернули наш div в компонент транзишен групп также у него должно быть название и можно указать ток который
00:25:46 - 00:26:53
используется внутри нашем случае это div остается скопировать стиле название классов и текстиль именуется особым образом сейчас все рассмотрим анимация проходит несколько стадий когда она активна и когда анимация закончилась и соответственно можно отследить добавление элемента в список и удаление элемента соответственно enter элиф и теперь давайте посмотрим как это работает при добавлении нового элемента в список происходит вот такая плавная анимация допустим я хочу чтобы элемент заезжал по оси x пробуем добавить новый элемент и
00:26:20 - 00:27:29
теперь анимация выглядит вот так как зарегистрировать компонент во viewtrip глобально для этого у инст винса приложения необходимо вызвать функцию компонент который первым параметром мы передаем название компонента а вторым параметром сам компонент тридцать первый вопрос как передать данные из родительского компонента в дочерние не используя пропсы и глобальное хранилище есть вот такой компонент и в нем используется другой компонент который называется child в родительском компоненте есть некоторые
00:26:54 - 00:27:59
данные а именно информация пользователя задача отобразить эти данные в дочернем компоненте не используя пропсы для этого во вью есть механизм который называется pro white inject в родительском компоненте мы пройдем некоторые данные в данном случае нашего пользователя а в дочернем компоненте необходимо сделать инъекцию то есть эти данные как бы внедрить в этот компонент делается это следующим образом откроем браузер и убедимся в том что данные отобразились подобные инъекции можно делать игнорируя цепочку компонентов и
00:27:28 - 00:28:35
передавать данные на сколь угодно глубокую вложенность 32 вопрос как добавить классный элемент по условию есть кнопка которая меняет значение модели the gale на обратное тру на фолс фолз натру и есть некоторые стили а именно класс green который устанавливает цвет заднего фона в зеленый то есть задача при нажатии на эту кнопку менять по условию класс на корневом блоки делается это следующим образом мы бензин некоторый объект которым как ключ указываем название класса а как значение условия по которому этот класс должен
00:28:02 - 00:29:11
отрисовывается как видите теперь при нажатии на кнопку цвет заднего фона у нас меняется как динамически изменять стили у элемента опять же есть некоторая кнопка которая меняет значение цвета с красного на зеленый и зеленого на красный задача навешивать динамический онлайн стиль который будет менять значение заднего фона точно таким же образом мы бензин стиле как ключ указываем css свойства и как значение указываем то чему это свойство равно в нашем случае этот свет как видите при нажатии на кнопку цвет
00:28:36 - 00:29:42
заднего фона действительно меняется таким образом мы добились динамических стилей 34 вопрос расскажите о салатах во вью лучше всего рассмотреть на примере у нас есть компонент карт который просто представляет из себя некоторую обертку со стилями рамка и так далее и в эту обертку мы хотим поместить какие-то другие элементы какой-то текст давайте попробуем написать текст и как видите карт остается по-прежнему пустым все дело в том что view по умолчанию не знает куда добавлять содержимое для этого используются как раз slade и как
00:29:10 - 00:30:15
видите теперь текст появился он добавляется именно в этот слот девы этот слот укажите туда данные и будут добавляться также view предоставляет возможность делать множественные слоты и для этого необходимо указать у них название этот слот будет для заголовка нашей карточки также сделаем блок который будет содержать в себе контентную часть и в этом блоке мы сделаем отступ сверху 20 пикселей внутри этого блока мы поместьем слот и название для него сделаем как body то есть тело карточки и последний блок будет для кнопок например
00:29:42 - 00:30:54
кнопка отмените кнопка сохранить назовем слот actions также сделаем отступ сверху 15 пикселей и добавим majin left outer чтобы кнопки были с правой стороны карточки теперь попробуем в эти слоты что-нибудь поместить это делается следующим образом создается template и в нем указывается название слата off to comply там нам сразу подсказывает теперь все что внутри этого темплейт а мы поместим будет добавляться в соответствующий слот с соответствующим названием здесь укажем как название body откроем
00:30:18 - 00:31:29
браузер и выглядит это примерно вот так ну и добавим еще пару кнопочек в слот actions таким образом с помощью слотов мы можем задавать некоторые каркас некоторую структуру нашего компонента которую можно встраивать другие элементы 35 вопрос каким способом можно получить доступ к дом элементу во вью есть кнопка и input и задача при нажатии на кнопку получить доступ к дом элементу вот этого input а для этого во вью используются референса указываем название референса и к нему теперь мы можем обращаться внутри компонента
00:30:53 - 00:32:05
создадим функцию детров сделаем консоль лоб и чтобы получить reference мы используем следующий синтаксис называем название референсом на кнопку вешаем слушатель события не вызываем функцию метров нажимаем на кнопку и получаем дом элемент рим пута таким образом можно сделать например фокус на этот input вызываем функцию фокус и теперь при нажатии на кнопку как видите фокус перемещается прямо на input 36 вопрос зачем нужен keep-alive во вью и так есть две кнопки и два компонента компоненты абсолютно идентичные за
00:31:29 - 00:32:46
исключением вот этой надписи каждом из компонентов есть свой счетчик и кнопка которая этот счетчик изменяет второй компонент как видите выглядит точно так же и первые 2 компоненты зарегистрированы в родительском компоненте и также есть некоторая модель которая в себе хранить название этих компонентов при этом при нажатии на кнопки мы эти названия изменяем на соответствующий при этом во вью есть возможность динамически компоненты перерисовывать и делается это следующим образом используем стандартный компонент
00:32:08 - 00:33:11
который так и называется и используем отъебут из как видите теперь при нажатии на кнопку у нас отрисовывается либо 1 либо 2 но при этом при смене компонента значение в счетчике у нас обнуляется поскольку компонент каждый раз монтируется заново для этого и нужен компонент keep-alive который позволяет компонент на этом этапе сохранять как видите теперь счетчик не обнуляется и компонент у нас не демонтируется он живет вечно телепорт его view зачем они нужны и как используются и так есть пустой компонент давайте создадим
00:32:39 - 00:33:48
некоторую иерархию блоков сделаем несколько вложенных дивов и напишем в одном из них что-нибудь поскольку мы используем один компонент в другом формируется некоторые иерархия каждый компонент вложен в другой на основании этой вложенности формируется дом дерево и в некоторых случаях элемент нам необходимо переместить из одного места там дерево в другой для этого используются телепорты допустим переместим вот этот вот блок с текстом самый корень страницы в боди для этого этот блок вырежем и поместим
00:33:14 - 00:34:18
внутрь телепорту сохраняем откроем инспектор посмотрим на иерархию вот этих дивов и нужный нам блок мы здесь не найдем но этот блок есть в корне как раз внутри body в самом самом низу как подключить внешний плагин во view 3 для регистрации внешнего плагина используется функция юз у экземпляра нашего приложения как создать свой собственный плагин во viewtrip для этого необходимо создать объект у которого будет метод install внутри него можно подключать различные кастомные директивы миксе иные компоненты
00:33:47 - 00:35:03
делать различную настройку и так далее при этом подключение этого плагина будет также с помощью функцию у экземпляра приложения 40 вопрос есть некоторый компонент и некоторые миксины при использовании хуков жизненного цикла таких как mounted created on mounted внутри миксина и при подключении этого миксина в компонент то в какой последовательности будут вызываться хуки сначала компонента или же сначала миксина а если этих миксин несколько то как это все будет чередоваться и в какой последовательности выполняться
00:34:24 - 00:35:31
рассмотрим на примере есть некоторый компонент и давайте создадим миксин внутри миксина воспользуемся life сайкл хуком mounted и выведем здесь консоль мог о том что отработал первый миксин создадим еще один такой миксин ставим сюда код из первого и единственного замене влоги теперь подключим эти миксины в компонент один за одним сначала первый миксин затем 2 и внутри компонента также сделаем lifecycle хук mounted но здесь в логах уже напишем что отработал lifecycle хук именно компонента откроем браузер и посмотрим в
00:34:58 - 00:36:15
какой последовательности они выделились откроем консоль как видите сначала отработали поочередно миксины и только потом компонент почему не стоит использовать в качестве ключей индекса элемента массива ключ всегда должен быть связан с элементом массива не должен изменяться по хорошему чтобы это был какой-то уникальный айти потому что при удалении перестановки элементов в массиве яндекс и элемент с которым он был сопоставлен нарушается то есть один индекс может относиться уже совсем к другому элементу при этом пропадает
00:35:37 - 00:36:41
эффективность использования ключей и алгоритм который работает с virtual дом работает некорректно 42 вопрос почему этот код не работает рассмотрим на примере есть некоторые список основанный на массиве есть кнопка при нажатии на которую вызывается функция filter здесь мы делаем фильтрацию поэтому массиву и оставляем только нечетные элементы откроем браузер и попробуем нажать на кнопку как видите никакая фильтрация не происходит это частая ошибка новичков которые не знают о том что функция filter возвращает новый массив и массив
00:36:09 - 00:37:20
который возвращает функция filter необходимо заново положить в лист как видите теперь остаются только нечетные числа можно ли использовать vi iv и vi ford на одном элементе объясните свой ответ в документации рекомендация в которой написано избегать использования vi-iv вв for помечено отметкой важно для фильтрации рекомендуется использовать компьютер свойства которые возвращают уже отфильтрованный список или если же необходимо скрыть весь список целиком итоги iv рекомендуют переносить на элемент выше то есть вот такой вот
00:36:45 - 00:37:54
вариант является плохим и так делать не стоит а вот один из этих вариантов можно смело использовать причем active users это как раз компьют свойства 44 вопрос можно ли изменять компьютер свойства изменять напрямую значение компьют свойства не рекомендуется необходимо изменить одну из зависимости которая используется внутри этого свойства или же создать новую компьютер функцию которая будет внутри себя работать с другой компьютер функцией для чего нужен view x и какие проблемы он решает начну с того что view x это поттер для
00:37:19 - 00:38:30
управления состоянием и он служит централизованным хранилищем данных для всех компонентов при этом мы избавляемся от необходимости передавать данные по иерархии сверху вниз есть некоторое глобальное хранилище и любой компонент может получать из него данные на слайде вы это можете прекрасно увидеть view x гарантирует что состояние может быть изменено только предсказуемым образом а именно с помощью мутаций и экшенов расскажите о state и guitars во вью x г x использует единое дерево состоянии это тот случай когда один объект содержит
00:37:54 - 00:39:06
все состояние приложения и служит единственным источником истины это также означает что в приложение будет только одно хранилище state мы храним данные из которой нам предстоит работать гетеры же в свою очередь это некоторые компьютеры свойства аналогичные свойства мисс компонента внутри себя они производят какие-то вычисления над данными которые находятся в состоянии и аналогичным образом кэширует результат до тех пор пока одна из зависимости не изменится расскажите о мутациях и экшенах во вью x в чем их отличие
00:38:30 - 00:39:40
мутации во вью x являются единственным способом изменить состояние по сути мутация представляет из себя просто функцию которая внутри себя изменяет какие-то поля из состояния мутации позволяют сделать процесс изменения состояния более прозрачным и явным экшен и похоже на мутации но есть некоторые отличия экшен и содержат себе некоторые сайт эффекты и запросы на сервер таймеры но при этом внутри себя экшен и вызывают мутации для того чтобы как-то изменить состояние при этом мутации всегда являются синхронными и не могут
00:39:05 - 00:40:17
содержать какую-то асинхронную логику свою очередь экшены как раз по большей части для синхронных действий и предназначены так использовать сторону три компонента после того как мы глобально зарегистрировали сторону нашем приложении внутри любого компонента мы можем обратиться к нему вот таким вот способом при этом с помощью специальных методов мы можем вызывать мутации экшены обращаться к state у и использовать геттеры также во вью x есть специальные функции которые позволяют в компонент завопить state геттеры экшены и мутации
00:39:41 - 00:40:50
при этом все зама блины и функции или данные будут доступны в данном компоненте 49 предпоследний вопрос как принудительно обновить компонент во вью рассмотрим на примере некоторый блок мы выводим рандомное число с помощью пакета масс как видите при обновлении страницы это число всегда разное и задача при нажатии на кнопку принудительно вызвать перед рендеринг компонента чтобы там отобразилось новое число при нажатии на кнопку будем вызывать функцию апдейт а для того чтобы обновить компонент во вью
00:40:15 - 00:41:17
есть специальная функция специальный метод который называется force апдейт как видите теперь при нажатии на кнопку у нас перерыл дерево its a component и заключительный вопрос для чего нужны асинхронные компоненты во view некоторых случаях при росте приложения банду финальная сборка приложения становится очень большой и возникает необходимость разделять приложение на меньшие части и загружать компоненты сервер только в тот момент когда они необходимы view предоставляет такую возможность и для этого предназначен
00:40:46 - 00:41:49
метод который называется define a sin компонент и на этом друзья мы заканчиваем надеюсь ролик вам был полезен вы действительно извлекли для себя что-то новое и интересное и он в кратчайшие сроки позволил вам подготовиться к собеседованию на patreon я закинул файл в котором я собрал более 200 вопросов по java script css view react общие вопросы по веб и при этом на каждый вопрос есть ответ и ссылка для более детального ознакомления если хочешь меня подержать а заодно извлечь пользу и получить экспресс справочник для подготовки к
00:41:18 - 00:42:30
собеседованию то тогда вэлком на patreon но хорошей поддержкой для меня будет и просто лайк и комментарий от тебя читаю каждый комментарий и жду именно твой 7 пока жду вас следующих роликах
00:41:54 - 00:42:20