Vue что раньше mounted или computed
Хуки жизненного цикла Vue.js
Хуки жизненного цикла (lifecycle hooks) — важная часть любого серьёзного компонента. Нам часто нужно знать, когда компонент был создан, добавлен в DOM, обновлён или уничтожен. Хуки жизненного цикла показывают нам, как работает «за кулисами» выбранная библиотека. Они часто вызывают у новичков трепет или беспокойство. К счастью, понять принцип работы хуков несложно, см. схему:
Создание (инициализация)
Первыми в вашем компоненте идут хуки создания. Они позволяют вам выполнять действия ещё до того, как компонент будет добавлен в DOM. В отличие от прочих, хуки создания также выполняются в ходе отрисовки на стороне сервера.
Используйте хуки создания, когда вам нужно вам нужно что-то настроить в компоненте в ходе отрисовки на стороне клиента и сервера. Внутри таких хуков у вас не будет доступа к DOM или целевому элементу (mounting element) ( this.$el ).
beforeCreate
Хук beforeCreate выполняется прямо во время инициализации компонента. Данные ещё не стали реактивными, а события не настроены.
created
В хуке created вы сможете получить доступ к реактивным данным и активным событиям. Шаблоны и виртуальный DOM ещё не встроены (mounted) и не отрисованы.
Встраивание (вставка в DOM)
Хуки встраивания (mounting) — одни из самых часто используемых. Они позволяют получать доступ к компоненту непосредственно перед первой отрисовкой или сразу после неё. Однако эти хуки не выполняются в ходе отрисовки на стороне сервера.
Применяйте их, если непосредственно перед первичной отрисовкой или сразу после неё вам нужно отредактировать DOM компонента или получить к нему доступ.
beforeMount
Хук beforeMount выполняется до первичной отрисовки, а также после компилирования шаблона или функций отрисовки. Вероятно, вам никогда не потребуется использовать этот хук. Помните, что он не вызывается в ходе отрисовки на стороне сервера.
mounted
В хуке mounted вы получите полный доступ к реактивному компоненту, шаблонам и отрисованному DOM (через this.$el ). Mounted — самый популярный хук жизненного цикла. Обычно его используют для извлечения данных для компонента (вместо этого применяйте created ) и изменения DOM, зачастую ради интегрирования не-Vue библиотек.
Обновление (диффы и перерисовка)
Хуки обновления вызываются, когда изменилось реактивное свойство, используемое вашим компонентом, или, когда что-то ещё приводит к перерисовке. Эти хуки позволяют получить доступ к циклу «отслеживания-вычисления-отрисовки» компонента.
Применяйте их, если вам нужно узнать о перерисовке компонента, например, для отладки или профилирования.
Не применяйте их, если вам нужно узнать об изменении реактивного свойства в компоненте, вместо этого используйте вычисленные свойства или «наблюдателей» (watchers).
beforeUpdate
Хук beforeUpdate выполняется после изменения данных в компоненте и начала цикла обновления, сразу перед патчингом и перерисовкой DOM. Этот хук позволяет получить новое состояние любых реактивных данных в компоненте, прежде чем он будет отрисован.
updated
Хук updated вызывается после изменения данных в компоненте и перерисовки DOM. Если вам нужно получить доступ к DOM после изменения свойства, такой хук — самое безопасное место для этого.
Уничтожение
Хуки уничтожения позволяют действовать, например, прибраться или отправить данные для аналитики, после уничтожения компонента. Эти хуки срабатывают при демонтаже элемента и его удалении из DOM.
beforeDestroy
beforeDestroy выполняется непосредственно перед монтажом. Ваш компонент ещё полностью функционирует. Если вам нужно очистить события или реактивные подписки, то beforeDestroy — самое подходящее для этого место.
destroyed
Прочие хуки
Vue: Computed — вычисляемые свойства
или когда хочется упростить себе жизнь
Apr 23, 2017 · 6 min read
Обновлено 22.01.2018: Пересмотрел свежим взглядом и внёс мелкие правки. Заходите и в Telegram-канал по Vue: https://t.me/vuejs_ru
Условно, используемые данные во Vue можно разделить на 3 части:
И если первые два подразумевают “статичность” (присвоенное значение останется неизменным, до присвоения нового), то вычисляемые свойства автоматически рассчитывают своё значение.
Частая область их применения — красивое отображение данных для пользователя. Это может быть вывод даты в подробном формате или форматирование текста, выбор одного из варианта по условию.
Сама идея отслеживания изме н ений думаю перенята у Angular. Подобное там можно реализовать с помощью watch’еров, которые реагируют на произошедшие изменения. К сожалению, при увеличении их числа начинает медленнее выполняться цикл дайждеста — что приводило к “ощущениям” тормозов приложения.
Вкратце, вычисляемые свойства…
Вычисляемые свойства vs. watch
Vue предоставляет два варианта отслеживания данных:
Не стоит всё отслеживание реализовывать на основе методов-наблюдателей. Многое лучше делать с использованием вычисляемых свойств, используя все их преимущества.
Watch стоит использовать при “дорогих” операциях вычислений, а также для реализации асинхронных операций. Другим применением, может быть вызов дополнительной логики (например, для статистики).
Вычисляемые свойства vs. методы
Похожий результат можно получать и воспользовавшись методами для форматирования или преобразования данных. В чём разница?
Метод необходимо каждый раз явно вызвать для получения нового значения, а его результат никак не кешируется (ну или ещё придётся реализовывать мемоизацию).
Вычисляемые свойства автоматически отслеживают все свои зависимости и запускают перерасчёт только при их изменениях, кешируя результат.
Кеширование
Благодаря кешированию значений, не нужно переживать по поводу использования других вычисляемых свойств — никакого каскадного перерасчёта не будет. Каждое свойство “знает” свои зависимости и пересчитывается только при их изменениях, остальные вернут закешированное значение.
Вычисляемые свойства для выноса логики из шаблона
Допустим есть шаблон, в котором хочется вывести имя пользователя в верхнем регистре, а также сколько прошло времени со дня рождения:
В шаблоне, который предназначен для определения структуры элемента теперь присутствует логика. По возможности, следует стараться этого избегать, меньше будет путаницы и чище код.
А что будет если потребуются сложные вычисления? Кроме того, что шаблон ещё сильнее распухнет, сам синтаксис шаблонов допускает использование внутри фигурных скобок только одного выражения. Тернарный оператор ещё допустим, но логика сложнее — нет.
Исправить пример дело пары минут — добавляем свойство computed и описываем в объекте все вычисляемые свойства, которые по сути являются просто функциями, возвращающими новое значение:
Не используйте стрелочные функции при определении вычисляемых свойств, иначе this внутри них не будет указывать на экземпляр Vue! Но краткую запись метода использовать можно:
В шаблоне вычисляемые свойства можно использовать как обычные:
Вычисляемые свойства для различных “флагов”
Это конечно уже зависит от вкусовых предпочтений каждого, но я стараюсь по максимуму выносить логику из шаблона.
Например, чтобы выводить сообщение об отсутствии элементов в массиве можно сделать так:
И это полностью рабочий вариант. А можно сделать вычисляемое свойство для флага и использовать уже его:
Никакой логики в шаблоне, читается лучше, а при необходимости эти вычисляемые свойства можно использовать и в других сравнениях.
Вычисляемые свойства как замена фильтров
Во Vue 1.х можно было использовать фильтры в выражениях шаблона:
В релизе Vue.js 2 фильтры были удалены, а их функционал было предложено перенести в вычисляемые свойства для более явного разделения логики от разметки:
С версии Vue 2.1.0 вновь стало возможным использовать фильтры, но только внутри mustache-шаблонов.
Вычисляемые свойства для манипуляции массивами
По аналогии с предыдущим примером можно легко манипулировать элементами массива: фильтровать или сортировать.
Это пригодится, когда нет возможности получать с сервера данные сразу в нужном формате/порядке. С помощью вычисляемого свойства исправить это очень просто:
Вычисляемые свойства для добавления динамичности
Может пригодиться для реализации настраиваемых компонентов. Например, когда описание элемента может быть расположено в разных свойствах объекта. Для этого достаточно передать название свойства, и на их основе создать вычисляемое свойство:
Сеттеры вычисляемых свойств
Наверное редкий случай, когда это может пригодиться (по крайней мере мне ещё ни разу не приходилось воспользоваться), но есть возможность настроить вычисляемое свойство не только на чтение, но и реализовать логику на запись:
Теперь запись this.fullName = ‘Иван Иванов’ вычисляемого свойства вызовет сеттер, и this.firstName и this.lastName будут соответствующим образом обновлены.
Вычисляемые свойства и нереактивные данные
Но при изменении размеров окна браузера значение остаётся тем же. Почему это не сработало? Потому что вычисляемые свойства отслеживают изменения только реактивных данных (data или props).
Что же делать в таком случае? Можно добиться “реактивности” несколько другим способом. При инициализации Vue добавить переменную и записать в неё какое-то стартовое значение (или пустое). Теперь есть реактивная переменная и стартовое состояние:
Как же поддерживать эту переменную в актуальном состоянии? Для этого в mounted хуке добавим обработчик события изменения размера экрана, а в коллбэке сохраним новое значение в нашу переменную:
В итоге у нас будет “реактивная” переменная с актуальным значением размера окна, которую можно использовать в других вычисляемых свойствах.
Вычисляемые свойства + асинхронность
Как упоминалось в самом начале, вычисляемые свойства не могут содержать в себе асинхронной логики вычисления значения. Одним из вариантов асинхронного вычисления можно сделать с помощью метода наблюдателя.
Есть другой вариант — воспользоваться плагином vue-async-computed:
Чем отличаются computed от methods во Vue?
Вычисляемые значения кешируются, обновляя свои значения при изменении тех реактивных свойств, от которых они зависимы. Computed нельзя вызывать или передавать им значения в сигнатуру. По сути, это не функции, это свойства объекта vue, геттер.
Методы, в свою очередь, повторно вызываются каждый раз, когда к ним идет обращение, могут получать параметры в свою сигнатуру и тп.
Вот кейс, который отлично демонстрирует различие не на базовом уровне (не то, как они функционируют), а на уровне прикладном (как это использовать):
Представьте обычный таймер, который раз в секунду добавляет единицу к свойству circles в свойстве data вашего экземпляра вью
Вот верстка для этого компонента:
Что делает вью? Рендерит компонент каждый раз, когда значение circles увеличивается на единицу. Каждый раз во время рендера вызывается метод getRunnerStatus. Откройте консоль и вы увидите, что из метода там печатается ‘hi’. В чем проблема? Статус таймера-то не изменяется. Вывод будет всегда одинаковый: Runner’s status: running
Если вместо метода запилить computed, то вы увидите, что ‘hi’ в консоли вывелась один раз. Значение закешировано, свойство finished не было изменено, вычисленное свойство не было пересчитано (функция не вызывалась).
Касательно вашего примера: вы используете метод drawRes() в верстке, по-этому он и вызывается каждый раз при рендере view, собственно, по тем причинам, которые я описал выше.
ps при желании вычисляемое свойство можно сделать сеттером, но я лично не встречал таких кейсов в проде.
Обзор Vue.js 2.6
Совсем скоро должна выйти новая версия Vue.js — 2.6. Под катом вы найдете обзор новых фич следующей версии, включая новый синтаксис слотов, Vue.observable() и много чего еще!
1. Новый синтаксис для scoped slots
Это одно из самых значимых изменений. Оно включает в себя:
Как использовались scoped slots в версии Vue@2.5.22:
Для дефолтного слота можно применить специальный синтаксис, если не используются именованные слоты:
И вот сокращение для именованных слотов:
2. Динамический аргумент директивы
Если вы хотите динамический аргумент для v-bind или v-on, то во Vue@2.5.22 у вас есть только один вариант:
Но у него есть пара недостатков:
3. Создание реактивных объектов с помощью Vue.observable()
Раньше, чтобы создать реактивный объект, нужно было засунуть его внутрь инстанса vue-компонента. Теперь у нас есть отдельный метод, который делает объект реактивным — Vue.observable().
Реактивный объект можно спокойно использовать в render- и computed-функциях.
4. Загрузка данных на сервере
В новом обновлении vue-server-renderer изменил стратегию загрузки данных для SSR.
Раньше нам советовали вызывать методы asyncData() у компонентов, полученных через router.getMatchedComponents().
В новой версии появился специальный метод у компонентов — serverPrefetch(). vue-server-renderer вызовет его у каждого компонента и дождется решения возвращенных промисов:
Чтобы узнать, когда завершилось ожидание всех serverPrefetch() и приложение завершило свой рендеринг, в контексте функции серверного рендера появилась возможность добавить хук rendered():
5. Улучшенный вывод ошибок компилятора
При компиляции html в render-функцию vue-template-compiler может выдать ошибки. Раньше Vue выводил описание ошибки без ее местоположения, теперь новая версия будет показывать, где она находится.
Новый вывод ошибки vue-template-compiler@2.6.0:
6. Отлов асинхронных ошибок
Теперь Vue может ловить даже асинхронные ошибки в хуках жизненного цикла и обработчиках событий.
Ошибка после маунта:
Ошибка после клика:
7. Новая сборка для ESM браузеров
В новой версии добавилась еще одна сборка Vue — vue.esm.browser.js. Она предназначена для браузеров, поддерживающих ES6 Modules.
Если честно, мне бы хотелось видеть еще одну сборку — такую же, как vue.esm.browser.js, но без компилятора HTML. Тогда я бы смог подвозить браузерам с ES6 Modules более свежий код, когда компилирую шаблоны при сборке.
8. Сокращение для v-bind.prop
Как было во Vue@2.5.22:
Как можно во Vue@2.6.0:
9. Поддержка кастомного toString()
Тут все просто: если вы переопределите метод toString() у объекта, то Vue при отображении станет использовать его вместо JSON.stringify().
В версии Vue@2.5.22 мы увидим на экране:
10. Работа v-for с итерируемыми объектами
В новой версии v-for может работать с любыми объектами, которые реализуют iterable protocol, например Map или Set. Правда, для Map и Set в версии 2.X не будет поддерживаться реактивность.
Посмотреть все новые фишки в деле можно прямо сейчас, установив бета-версию Vue:
Если вы компилируете vue-файлы при сборке или используете SSR, то не забудьте добавить vue-template-compiler и vue-server-renderer такой же версии:
Обновление: Vue 2.6 вышел официально, тут можно почитать пост Евана.
Vue.js для начинающих, урок 7: вычисляемые свойства
Сегодня, в седьмом уроке курса по Vue, мы поговорим о вычисляемых свойствах. Эти свойства экземпляра Vue не хранят значения, а вычисляют их.
Цель урока
Начальный вариант кода
Задача
Решение задачи
Мы для решения этой задачи воспользуемся вычисляемыми свойствами. Так как эти свойства не хранят значения, а вычисляют их, давайте добавим в объект с опциями, используемый при создании экземпляра Vue, свойство computed и создадим вычисляемое свойство с именем title :
Теперь нам осталось лишь вывести title в теге
нашей страницы.
Сейчас этот тег выглядит так:
А теперь мы сделаем его таким:
Взглянем на страницу и проверим работоспособность того, что мы только что сделали.
Заголовок страницы изменился
Это был очень простой пример, но пример, вполне применимый на практике. Давайте теперь рассмотрим более сложный вариант использования вычисляемых свойств.
Более сложный пример
Этот механизм работает нормально, но если нам понадобится, основываясь на том, на какой именно цветной квадрат наведена мышь, менять не только изображение, но и что-то ещё, это будет означать необходимость рефакторинга данного кода. Давайте этим и займёмся.
Почему 0? Дело в том, что мы планируем устанавливать это свойство на основе индекса ( index ) элемента, над которым находится указатель мыши. Мы можем добавить индекс в конструкцию v-for :
Если сейчас обновить страницу и открыть консоль инструментов разработчика, мы можем убедиться в том, что при наведении мыши на квадраты в консоль попадают значения 0 и 1.
Проверка работоспособности созданного нами механизма
Однако изображение теперь на странице не выводится. В консоли появляется предупреждение.
Предупреждение, выводимое в консоль
Если теперь обновить страницу, изображение выведется и будет реагировать на наведение мыши на цветные квадраты. Но теперь этот механизм реализован с использованием вычисляемого свойства.
Обратите внимание на то, что кнопка тоже, как и ранее, правильно реагирует на установку inStock в 0.
Кнопка и надпись зависят от количества товара каждого вида
Почему всё продолжает правильно работать? Дело в том, что inStock всё ещё используется для привязки класса disableButton к нашей кнопке. Единственное различие нового варианта приложения и его предыдущего варианта заключается в том, что теперь inStock — это вычисляемое, а не обычное свойство.
Дополнительные сведения о вычисляемых свойствах
Учитывая это, можно сказать, что если для получения некоего значения требуются ресурсоёмкие вычисления, то для их выполнения выгоднее использовать вычисляемое свойство, а не метод. Метод придётся вызывать каждый раз, когда будет нужно соответствующее значение.
Кроме того, важно помнить о том, что в коде вычисляемых свойств не следует менять данные, хранящиеся в экземпляре Vue. В этом коде нужно лишь выполнять вычисления, основанные на существующих данных. Эти функции должны быть чистыми, лишёнными побочных эффектов.
Практикум
→ Вот заготовка, которую вы можете использовать для решения этой задачи
Итоги
На этом занятии мы познакомились с вычисляемыми свойствами. Вот самое важное из того, что мы о них узнали:
Если вы выполняете домашние задания к этому курсу, расскажите, делаете ли вы исключительно то, что вам предлагается, или идёте дальше?