Introduction

Введение в Composition API

Это, безусловно, самое ожидаемое изменение в Vue3. Оно должно помочь с организацией и возможностью многократного переиспользования кода компонентов.

На данный момент, если вы работали в Vue, вы использовали то, что называется Options API. Options API организует код по свойствам: и так далее.

Несмотря на то, что это супер интуитивно понятная система, которая привлекла тысячи людей, чтобы попробовать VueJS, стало очень сложно поддерживать в рабочем состоянии компоненты больших размеров. Код для одной функции часто разбросан в нескольких местах, сотнями строк друг от друга.

Пойдем по порядку и разберемся с тем, что здесь происходит.

API Vue Composition описывает множество основных функциональных возможностей Vue, таких, как реактивность и компонентные методы. Поэтому мы должны импортировать их.

Применение является одним из самых больших изменений в Vue3. По сути, он позволяет определить, какие данные/функции передаются из компонента обратно в шаблон. Всё, что он возвращает — доступно в шаблоне.

Мы можем задавать реактивные данные, хуки жизненного цикла, вычисляемые свойства, определённые методы и возвращать всё, что захотим.

Оборачивая все эти данные методом , все эти данные автоматически становятся реактивными. Этот шаблон состояния взят из документации по .

Следует отметить, что мы объявляем переменную . Как видите, она является computed-свойством и определяется прямо в методе . Больше нет никаких отдельных вычисляемых свойств, теперь в одном месте определяются и и свойства!

Это просто определение типичных старых функций. Единственное, что тут действительно уникально, это то, что поскольку все реактивные данные хранятся в объекте состояния, мы должны сохранить его в переменную и обращаться к его своствам. Но это не специфично для Vue3 — это просто обычные объекты на Javascript.

Наконец, мы возвращаем эти данные из метода setup(). Что делает эти данные и методы доступными внутри шаблона. К счастью, код шаблона все так же сохраняет прежний формат описания.

Когда это было впервые представлено, в сообществе Vue были тонны возмущений по этому поводу, потому что люди не хотели вынужденно переделывать и переосмысливать всю свою логику компонентов. Однако, впоследствии было решено, добавить эти изменения в качестве опциональных, и люди все ещё могут использовать Options API без каких-либо препятствий.

Если вы уже хотите начать практиковаться, вы можете использовать API Vue Composition в своих проектах.

Поддержка Typescript

Еще одно изменение заключается в том, что ядро Vue будет переписано с помощью Typescript. Опять же, основной проблемой было то, что принуждение людей к изучению Typescript увеличит порог вхождения в работу на Vue.

Поэтому команда Vue предоставила выбор: если вам нужен Typescript, используйте его; если нет, придерживайтесь стандартного синтаксиса Javascript. Оба варианта работают просто отлично.

Если ты такой же, как я, то, возможно, спрашиваешь «Зачем TypeScript?». Для начала — это хайпово, использовать TypeScript везде, где есть JavaScript: фронтенд, бекенд.
Кроме всего прочего, Typescript позволяет вам добавлять статическую типизацию в ваш проект на Javascript. Это само по себе очень поможет вам поддерживать проекты в долгосрочной перспективе.

Кроме того, при работе в IDE, поддерживающих Typescript, в процессе разработки вам будет доступна более подробная информация о типах и более умное автодополнение.

По мне, так, тот факт, что Vue будет написан на Typescript, пойдет на пользу разработчикам, даже если они продолжат использовать стандартный Javascript.

Так как переписанное ядро Vue использует Typescript, то даже в процессе написания на синтаксисе Javascript будет доступно более полное автодополнение, детальный вывод информации и, в конечном счете, документация прямо внутри вашей IDE. Это поможет избежать большого количества просмотров документации по Vue.

Getting Started

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step — grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

The easiest way to try out Vue.js is using the Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an file and include Vue with:

or:

The Installation page provides more options of installing Vue. Note: We do not recommend that beginners start with , especially if you are not yet familiar with Node.js-based build tools.

If you prefer something more interactive, you can also check out this tutorial series on Scrimba, which gives you a mix of screencast and code playground that you can pause and play around with anytime.

Наши code conventions

Чтобы ваш опыт был еще более приятным, вот обещанные выше соглашения по коду от нашей команды, может быть вам пригодятся.
Безусловно они очень субъективны, но иначе быть не может.

Наш собственный cookbook — сейчас содержит только пример сервиса, но будет расширяться (часть информации на локальных ресурсах).

Это наш Vue seed (TS, кастомные настройки Jest, ESlint и т.д.), в данный момент, до выхода в релиз Vue CLI 3,
он сгенерирован на предыдущей версии и представляет из себя не темплейт а репозиторий.
Готовится версия для разворачивания с помощью Vue CLI 3 через шаблон.

PS: После прочтения может показаться, что у Vue больше минусов чем плюсов — просто не хочется писать очередную хвалебную статью, ведь их и так полон гугл

PPS: Кстати английский вариант предыдущей статьи был настолько успешен, что у меня даже состоялось прямое общение (видео) с основными виновниками — но работу не предложили =(

Английская версия: https://medium.com/@igogrek/how-i-started-loving-vue-d41c1c8e77e1

Что такое Vue.js. Первое приложение

Последнее обновление: 29.08.2017

Vue.js представляет современный прогрессивный фреймворк, написанный на языке JavaScript и предназначенный для создания веб-приложений клиентского уровня.
Основная сфера применения данного фреймворка — это создание и организация пользовательского интерфейса.

Первый релиз фреймворка увидел свет в феврале 2014 года. Его создателем является Эван Ю (Evan You), который до этого работал в Google над AngularJS. С тех пор фреймфорк динамично
развивается, его текущей версией является версия 2.3.

Vue.js имеет довольно небольшой размер — не более 20 кБ, и при этом обладает хорошей производительностью по сравнению с такими фреймворками как
Angular или React. Поэтому неудивительно, что данный фреймворк в последнее время набирает обороты и становится все более популярным.

Одним из ключевых моментов в работе Vue.js является виртуальный DOM. Структура веб-страницы, как правило, описывается с помощью DOM (Document Object Model), которая представляет организацию
элементов html на странице. Для взаимодействия с DOM (добавления, изменения, удаления html-элементов) применяется JavaScript.
Но когда мы пытаемся манипулировать html-элементами с помощью JavaScript, то мы можем столкнуться со
снижением производительности, особенно при изменении большого количества элементов. А операции над элементами могут
занять некоторое время, что неизбежно скажется на пользовательском опыте. Однако если бы мы работали из кода js с
объектами JavaScript, то операции производились бы быстрее.

Для этого Vue.js использует виртуальный DOM. Виртуальный DOM представляет легковесную копию обычного DOM. Если приложению
нужно узнать информацию о состоянии элементов, то происходит обращение к виртуальному DOM. Если данные, которые используются в приложении Vue.js,
изменяются, то изменения вначале вносятся в виртуальный DOM. Потом Vue выбирает минимальный набор компонентов, для которых надо выполнить изменения на
веб-странице, чтобы реальный DOM соответствовал виртуальному. Благодаря виртуальному DOM повышается производительность приложения.

Vue.js поддерживается всеми браузерами, которые совместимы с ECMAScript 5. На данный момент это все современные браузеры, в том числе IE11.

Первое приложение

https://unpkg.com/vue

Либо если используется Node.js, то можно установить Vue.js через пакетный менеджер npm с помощью команды:

npm install vue

В данном случае будем использовать подключение файла из CDN. Для этого определим следующую веб-страницу:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <input type="text" v-on:input="setMessage" />
    <p>`message`</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            setMessage: function(event){
                this.message = event.target.value;
            }
        }
    })
</script>
</body>
</html>

Для создания объекта приложения в Vue.js применяется объект Vue. Этот объект, во-первых, определяет
корневой элемент приложения на веб-странице с помощью параметра el:

el: '#app'

То есть корневым элементом приложения будет элемент с id равным app.

Также объект определяет используемые данные через параметр data:

data: {
	message: 'Hello Vue!'
}

В данном случае определено только свойство message, которая хранит строку.

В элементе с id=app на веб-странице, используя двойные фигурные скобки мы можем вывести значение свойства message и более того связать участок веб-станицы с этим элементом.

<p>`message`</p>

Последний параметр объекта Vue — methods определяет действия, которые выполняются в приложении:

methods: {
	setMessage: function(event){
		this.message = event.target.value;
	}
}

Здесь определен метод setMessage, который является обработчиком события ввода для элемента input на странице. Через параметр event в этот
метод передается информация о событии. В частности, используя значение , мы можем получить введенное пользователем значение
и присвоить его переменной message. Для получения переменной message, которая была определена выше в параметра data, применяется ключевое слово this.

А для связи элемента input с этим методом определяется атрибут .

Теперь запустим веб-страницу в веб-браузере (можно просто кинуть веб-страницу в браузер):

И при вводе в текстовое поле будет автоматически изменяться значение, которое выводится на веб-страницу.

Вперед

Внутри компонента

Это самое базовая использование Vue. Одна страница с одним компонентом. Это похоже на Vanilla Javascript с оттенком реактивности (как только вы изменяете объект, представление обновляется).

Вот часть HTML:

А вот и Javascript:

Как видите, все довольно просто. Здесь используются только два метода: первый для добавления, а второй для удаления задач.

В 23-й строке раздела HTML вы найдете функцию «on-click», которая переключает текущее задание между завершенным и незавершенным состояниями, а в строке 25 — другое, чтобы установить текущее задание для редактирования. Двухстороннее связывание данных делает все работу.

Методы взаимодействуют и изменяют данные (массив «todos»), достигая To-Do через «this». Как я уже сказал, это выглядит почти так же как если бы это был бы обычный Javascript.

Но что, если у нас есть два компонента в разных местах? Или три? Что, если один компонент является родительским для другого, и нам нужно передавать информацию между компонентами?

Props и $emit — для компонентов родителей и их потомков

Допустим, у нас есть представление, разделенное на несколько компонентов, с дочерними компонентами внутри компонентов, вот как то так:

Как видите, оранжево-желтый основной компонент действует как корень каждого компонента. Внутри 3 компонента: красный, фиолетовый и зеленый. Некоторые из компонентов имеют дочерний компонент, что делает его веб-приложением 3 уровня.

Что делать, если вы хотите передать информацию из красного компонента в один из дочерних зеленых компонентов. Как бы вы это сделали?

Вы можете отправить информацию родителю с помощью $emit, а затем дочернему компоненту с помощью props. Это будет выглядеть как то так:

Вот как я использовал $emit и props:

Выглядит немного сложновато, но в действительности все довольно просто, когда вы освоитесь. Отправляйте свои данные с помощью $emit в верхний компонент, а вниз с помощью props.

Но что, если мы хотим отправить информацию между компонентами с несколькими уровнями между ними? Нам нужно будет использовать 4 $emits и 2 props?

Ну, конечно так можно сделать. Но это было бы сумасшествием.

Лучше в этом случае использовать EventBus.

Фрагменты в Vue3

Фрагменты — бескорневые компоненты, т.е. компоненты, которые в template содержат больше одного родительского элемента. В Vue2 каждый компонент должен иметь один и только один корневой элемент.
И иногда это может быть той ещё головной болью.

Есть несколько случаев, когда возврат нескольких дочерних элементов гораздо упростил бы задачу. Например, давайте возьмем пример из React и скажем, что у вас есть структура таблицы с пользовательским компонентом под названием .

Наш компонент, по задумке, должен возвращать несколько элементов <td>. Но в настоящее время компоненты Vue должны иметь один корневой элемент.

Шаблон компонента может быть похож на этот, что вызовет некоторые проблемы с разметкой.

Вот здесь Фрагменты как раз очень к стати. Они позволяют возвращать несколько элементов, не ломая при этом разметку, что делает такие задачи супер простыми.

Шаблон компонента с использованием Fragment в Vue3 может выглядеть так.

И теперь, поскольку это вернет два элемента <td>, таблица будет валидной, и это будет итоговый, желанный результат.

Это именно то, что нам и было нужно. В настоящее время существует неофициальная библиотека Vue Fragment, которая использует внутренние директивы для того, чтобы получить все дочерние элементы компонента и переместить их в нужное место.

Программная проверка экземпляра компонента Vue

Как упоминалось в последнем разделе, вам может потребоваться доступ к экземплярам компонентов Vue для чтения значений, например. при написании подключаемого модуля браузера, где вам может потребоваться считывать значения или каким-то образом подключаться к ним.

Запуск обновления prop значения

Помимо выяснения того, как проверять внутренние переменные Vue, давайте также попытаемся обновить значение свойства компонента.

Скажем, у нас есть компонент, у которого есть переменная в prop, управляющая текстом элемента, как мы можем принудительно изменить значение, чтобы вызвать обновление пользовательского интерфейса?

<template>
  <h1>` msg `</h1>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
};
</script>

Поиск экземпляра компонента Vue

Для начала нам нужно найти элемент верхнего уровня компонента с помощью панели элементов Chrome devtools. В данном случае это элемент h1.

Использование команды $0

После того, как вы выбрали элемент, вы можете перейти к панели консоли в devtools и ввести $0.

$0 будет ссылкой на последний выбранный элемент на панели элементов.

Чтобы увидеть подробную информацию об экземпляре Vue, введите $0.__vue__.

Использование метода document.querySelector

Вы также можете выбрать элемент, используя любой из методов поиска DOM, таких как querySelector или getElementById и т. д. В этом случае мы будем использовать document.querySelector, чтобы увидеть экземпляр Vue:

document.querySelector('').__vue__

Здесь мы используем поиск элемента через его атрибут данных, но вы можете использовать любой допустимый селектор CSS в querySelector.

Определение значения переменной в prop

Теперь, когда у нас есть ссылка на экземпляр компонента Vue, мы можем развернуть его в консоли, чтобы увидеть, что внутри:

Добро пожаловать в Vue.js! Здесь вы можете увидеть все свойства объекта, которые Vue прикрепил к компоненту. Если вы используете какие-либо плагины, такие как Vuex или vue-i18n, вы также увидите здесь ссылку на них.

Давайте продолжим нашу задачу по обновлению значения в prop. Посмотрите внимательно, и вы увидите нашу переменную msg прямо посередине, нажмите на три точки, и вы увидите ее текущее значение.

Вы можете просмотреть значение всех свойства prop самостоятельно, используя предпочитаемую вами команду в консоли:

// Using $0
$0.__vue__.msg

// Using querySelector
document.querySelector('').__vue__.msg

Обновление значения в prop

Обновление значения в prop теперь является случаем обновления назначения переменной до желаемого значения. Так, например, используя описанную выше технику $0, вы набираете это в консоли:

$0.__vue__.msg = 'Hello from the updated value!'

И вот, вы увидите обновление пользовательского интерфейса прямо на ваших глазах!

Использование Vue.js

Фреймворк используется многими китайскими компаниями, в частности такими известными, как Alibaba, Baidu и Xiaomi. Связано это, скорее всего, с тем, что Эван Ю активно взаимодействует с китайским JavaScript-сообществом.

Vue.js входит в ядро Laravel и PageKit; также на Vue также перешел GitLab.

По словам Эвана Ю, Vue.js стал популярен, во-первых, после того, как его начало использовать сообщество Laravel, а во-вторых, когда разработчики поняли, что могут использовать Vue.js вместо React (у этого фреймворка, разрабатываемого компанией Facebook, в прошлом году возникли проблемы с лицензией).

Примеры сайтов, использующих Vue.js:

  • https://www.chess.com/
  • https://codeship.com/
  • https://livestorm.co/

Vue стал суперлегким

В настоящее время VueJS уже достаточно легкий (20 кб gzip). Но команда Vue столкнулась с проблемой: внедрение новых возможностей увеличило размер пакета для каждого пользователя, независимо от того, включает ли он их или нет.

Чтобы исправить это, Vue3 будет намного более модульным. В то время как это увеличивает количество импортов, которые вам понадобятся делать для разработки, однако, это гарантирует, что вы не будете тянуть неиспользуемые библиотеки в ваш проект.

Благодаря исключению нежизнеспособного кода, и модульному структурированию, оценочный размер для Vue 3.0 составляет примерно 10 kb gzip. Конечно, многие библиотеки будут импортированы заново, но это здорово, что мы не вынуждены тянуть их все из коробки.

По сути, разработчикам не придется расплачиваться за возможности, которые они никогда не используют.

Что такое Vue.js

Vue.js — это прогрессивный фреймворк, подходящий для создания пользовательских интерфейсов.

Название фреймворка созвучно с view, то есть с представлением (если говорить о модели MVC).

Vue.js — это фреймворк, который используется для решения задач именно уровня представления, его просто интегрировать с другими библиотеками и проектами. Иными словами, Vue.js — это инструмент, который можно внедрять постепенно. Возможность внедрения связана с тем, что Vue.js стремится к прогрессивности: поддержку Vue можно добавить в уже существующий проект, благодаря чему его функциональность будет значительно расширена. И это отличает его от других фреймворков.

Вообще простота интеграции — это одно из основных преимуществ данного фреймворка, особенно в сочетании с возможностью интеграции с бэкенд фреймворками.

Другие сильные стороны Vue.js — это простота в освоении и хорошая документация, а также высокая производительность.

Также Vue.js можно использовать для создания одностраничных приложений.

Центральная концепция Vue.js – это концепция компонентов, то есть небольших частей интерфейса пользователя, которые можно использовать повторно. Таким образом, и само приложение состоит из частей-компонентов. Один компонент может включать несколько других компонентов, то есть используется древовидная иерархия: 

Vue.js – это реактивный MVC фреймворк: представление (view) автоматически изменяется при изменении переменной (модели).

Vue.js имеет очень хорошую экосистему, которая включает в себя множество полезных сторонних компонентов и инструментов. На GitHub есть отдельный длинный список полезных вещей под названием Awesome Vue.js.

Vuex — наш менеджер состояний

Vuex — это шаблон управления состоянием Vue для приложений Vue.js.

Думайте о нем как о централизованном хранилище данных или «единственном источнике правды».

Vuex действует как единое центральное хранилище для всех компонентов в одном приложении. Кроме того, отслеживает все методы (или мутации) и помогает вам управлять всеми данными в вашем веб-приложении.

Если вы используете Vue Devtools, вы можете использовать их интересные функции, такие как отслеживание или просмотр всех данных, хранящихся в Vuex.

Здесь вы увидите запущенные методы, какие данные и методы которые в данный момент хранятся в хранилище Vuex, и сможете вернуться, чтобы проследить ваши шаги, изменить текущие данные и т. д.

Хотя веб-приложение несколько усложняется, добавлением накладных расходов, оно очень помогает разделить всю логику в один файл, предоставляя доступ к нескольким независимым компонентам и многому другому.

Давайте посмотрим, как я использовал его в реальной обстановке:

Снова довольно просто. Мы загружаем все функции и данные в файл store.js, который станет нашим «Единственным источником правды». Затем для каждого необходимого компонента мы загрузим нужные нам части.

Используйте vue-router для роутинга на клиенте

Если вы осуществляете роутинг на клиенте, то написать своё решение в целом не сложно. На самом деле это просто — сопоставить маршруты и поменять после этого компоненты.

Однако использование ещё проще! К тому же, это официальный пакет Vue, поэтому вы можете не беспокоиться по поводу совместимости и поддержки.

И как только вы начнёте работать с:

  • запросами
  • параметрами маршрута
  • вложенными маршрутами
  • динамическим сопоставлением маршрутов
  • транзишенами

…а вы, скорее всего, начнёте с этим работать, то написание своего решения станет слишком сложным, громоздким. Поэтому вместо этого читайте гайд по vue-router от Эда Зынды «Начало работы с Vue Router».

В Vue3 проведена оптимизация рендеринга

Огромная часть Vue3 стала значительно быстрее и эффективнее. На самом деле, по информации из дискуссий создателя Vue.Js, внутренние тесты показали, что стили шаблонов в Vue3 стали компилироваться на ~120% быстрее, чем в Vue2.

Были проведены две ключевые оптимизации, которые помогли улучшить скорость рендеринга Vue3:

  1. Оптимизации блочного дерева
  2. Статический подъем деревьев

Давайте рассмотрим подробности о каждом из них.

Оптимизации блок-дерева

Использование виртуального DOM имеет естественное узкое место, потому что каждый компонент должен отслеживать свои зависимости.

Наблюдение за этими зависимостями очень трудоёмкая и медленная процедура, так как она рекурсивно проверяет все дерево элементов, чтобы обнаружить изменения.

Одна вещь, которую заметила команда Vue, заключается в том, что в компонентах большая часть структуры узла является статической. И если секция на самом деле была динамической (из-за директивы v-if или v-for), то большое количество содержимого внутри неё всё равно было статическим.

Используя эту идею, Vue3 разбивает шаблон на статические и динамические секции. Теперь, когда рендер-функция знает, какие узлы являются динамическими, он не тратит время на проверку статических узлов на наличие изменений.

Это значительно сокращает количество элементов, за которыми нужно следить в реактивном режиме.

Объединение всех этих узлов создаёт дерево блоков или шаблон, разделенный на блоки узлов на основе директив (v-if, v-for).

В дереве блоков каждый узел содержит:

  • Полностью статическую структуру узлов
  • Статический контент, который не нужно отслеживать.
  • Динамические узлы, которые могут храниться в обычном массиве

Это устраняет необходимость рекурсивной проверки каждого отдельного элемента, значительно улучшая время запуска.

Статический подъем деревьев

В то время как статический подъём деревьев не является чем-то новым (он существует в Vue 2.0), в Vue3 добавили гораздо более агрессивные методы для повышения скорости проекта. Как следует из названия, статический подъем деревьев не пересканирует статические элементы, которые не имеют никаких зависимостей. Вместо этого, он использует один и тот же элемент.

Это значительно сокращает работу виртуального DOM-а и экономит много накладных расходов проекта, в первую очередь на сборке мусора.

В Vue3 статический подъем является гораздо более агрессивным, для того, чтобы работать как можно эффективнее.

Vue не обрабатывает несколько корневых узлов (пока что)

Речь идёт о root nodes — корневом элементе, в который обёрнут ваш компонент. Однако не для всех компонентов имеет смысл использовать один корневой узел.

Например, если вы визуализируете список элементов, целесообразнее просто возвращать список узлов в виде массива. Зачем лишний раз оборачивать его в тег ol или ul? Это называется фрагментом (понятие из React).

В настоящее время Vue не поддерживает фрагменты, хотя в 3-ей версии они .

Эта штуковина (фрагменты) недавно появилась в React, но для её реализации потребовалось переписать систему рендеринга. У Vue сейчас такая же ситуация.

Тем не менее, пока все мы ждём выхода Vue 3, вы можете использовать функциональные компоненты, чтобы обойти это ограничение. Энтони Гор написал об этом статью с примерами функциональных компонентов.

Dynamic Components

Sometimes, it’s useful to dynamically switch between components, like in a tabbed interface:

` tab `

The above is made possible by Vue’s element with the special attribute:

In the example above, can contain either:

  • the name of a registered component, or
  • a component’s options object

See this example to experiment with the full code, or this version for an example binding to a component’s options object, instead of its registered name.

Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes will be bound as DOM attributes. For some properties such as to work as you would expect, you will need to bind them using the .

That’s all you need to know about dynamic components for now, but once you’ve finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on Dynamic & Async Components.

Instance Lifecycle Hooks

Each Vue instance goes through a series of initialization steps when it’s created — for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.

For example, the hook can be used to run code after an instance is created:

There are also other hooks which will be called at different stages of the instance’s lifecycle, such as , , and . All lifecycle hooks are called with their context pointing to the Vue instance invoking it.

Don’t use arrow functions on an options property or callback, such as or . Since an arrow function doesn’t have a , will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as or .

Демо B: Vue Hooks

Вы можете легко воссоздать эту логику с помощью Vue Hooks, цель Hooks — потенциально заменить миксины в будущем. Прежде всего, вы должны установить пакет vue-Hooks с помощью менеджера пакетов. Откройте новый терминал в VS Code и запустите:

Затем откройте ваш файл main.js и инициализируйте Hooks с помощью командной строки перед новым оператором Vue:

Vue.use(Hooks);

Откройте папку компонентов и создайте внутри нее новый файл, назовите его Modal.vue, затем вернитесь в корневой каталог и создайте новую папку с именем Hooks. Внутри папки Hooks создайте новый файл с именем Hooks.js и скопируйте в него следующий блок кода:

import { useData, useMounted, useEffect, useComputed, useUpdated} from 'vue-Hooks'

export default function clickedHook(){
  const data = useData({ count:1 })
  const double = useComputed(() => data.count * 2)
  useMounted(()=> {
    console.log('mounted')
  });
  useUpdated(()=> {
    console.log('updated')
  });
  useEffect(()=> {
     console.log('DOM re-renders....')
   });
  return {
     data, double
  }
}

Как и в React, Vue Hooks заимствует синтаксис префикса использования и использует его способом принятым во Vue. Вы также заметили, что хуки жизненного цикла, доступные для каждого экземпляра Vue, доступны внутри хуков Vue, вот некоторые из них:

  • : выполняет инициализацию данных внутри вашего хука, поэтому счетчик инициализируется внутри него
  • : это больше похоже на вычисляемые свойства внутри вашего хука, поэтому двойное вычисление выполняется внутри него
  • : действует точно так же, как смонтированный Hook жизненного цикла в вашем экземпляре Vue, но для Hooks
  • : действует точно так же, как обновленный хук жизненного цикла в вашем экземпляре Vue, но для хуков
  • : это обрабатывает логику при повторном рендере DOM

Есть и другие свойства, которые вы можете импортировать, весь список можно найти здесь, на GitHub. Вы заметите, что он экспортируется как функция, откройте файл modal.vue, который вы создали ранее, и скопируйте нижеприведенный блок кода внутри него:

<template>
  <div> 
    <button v-on:click="data.count++">Button 2</button>
    <h2>`data`.`count`</h2>
    <h2>`double`</h2>
  </div>
</template>
<script>
import clickedHook from '../Hooks/Hooks'

export default {
  name: 'Modal',
  Hooks(){
    return clickedHook();
  }
}
</script>

Обратите внимание, что после импорта файла хуков вы можете получить доступ к данным и двойным константам, ранее определенным в хуке внутри этого компонента. Мы также видим, что регистрация Hooks имеет тот же синтаксис, что и регистрация данных, с установленной функцией и возвращаемым объектом внутри нее

Важно отметить, что …

  • Вы можете пойти дальше и сразу использовать Vue Hooks (ваша версия Vue должна быть 2.x)
  • Существует официально
  • Он экспериментален и поэтому не должен использоваться в продакшине
  • Прочитайте пост в блоге Сары Драснер, который также содержит еще больше примеров

Вы можете использовать npm или просто перейти на GitHub по этой ссылке, чтобы получить репозиторий проекта.

Declarative Rendering

At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:

` message `

We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set to a different value. You should see the rendered example above update accordingly.

Note that we no longer have to interact with the HTML directly. A Vue app attaches itself to a single DOM element ( in our case) then fully controls it. The HTML is our entry point, but everything else happens within the newly created Vue instance.

In addition to text interpolation, we can also bind element attributes like this:

Hover your mouse over me for a few seconds to see my dynamically bound title!

Here we are encountering something new. The attribute you are seeing is called a directive. Directives are prefixed with to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying “keep this element’s attribute up-to-date with the property on the Vue instance.”

If you open up your JavaScript console again and enter , you’ll once again see that the bound HTML — in this case the attribute — has been updated.

Conditionals and Loops

It’s easy to toggle the presence of an element, too:

Now you see me

Go ahead and enter in the console. You should see the message disappear.

This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/updated/removed by Vue.

There are quite a few other directives, each with its own special functionality. For example, the directive can be used for displaying a list of items using the data from an Array:

  1. ` todo`.`text `

In the console, enter . You should see a new item appended to the list.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector