Hooks во Vue.js версии 3.0

Перевод статьи: Nwose Lotanna Hooks are coming to Vue.js version 3.0

Эта статья знакомит с экспериментальной функцией Vue под названием Hooks.

Прежде чем начинать

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

Вам понадобится следующее на вашем компьютере:

• Node.js версии 10.x или выше. Вы можете проверить это, выполнив следующую команду в терминале/командной строке:

node -v

• Редактор кода: настоятельно рекомендуется Visual Studio Code
• последняя версия Vue, установлен глобально на вашей машине
• Vue CLI 3.0 установлен на вашей машине. Если установлена предыдущая версия то нужно сначала удалить старую версию CLI:

npm uninstall -g vue-cli

затем установить новую:

npm install -g @vue/cli

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

npm install

Введение: Hooks

Изначально компоненты React, содержащие логику состояний, должны быть компонентами класса. Несмотря на то, что в React уже были функциональные компоненты без сохранения состояния, необходимо было создать компоненты, которые бы соответствовали логике состояния, не будучи классами. Это было, причиной появления Hooks в React. Hooks — это способ использования логики состояний внутри функциональных компонентов (подробнее о функциональных компонентов можно почитать тут), что устраняет необходимость в написании классов.

Что не так с классами?

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

Но я обычно не использую классы в Vue JS ..

Если вы разработчик Vue, вы можете задаться вопросом, почему мы сейчас обсуждаем классы, поскольку вы не используете классы по умолчанию в ваших проектах Vue. Хотя это действительно так, Vue JS позволяет вам использовать функциональные компоненты, которые не сохраняют состояния, с миксинами. С помощью Vue mixins вы можете определить логику или функциональность в конкретном файле и использовать их в функциональном компоненте.

Проблема с mixins

В своем блоге несколько месяцев назад Sarah Drasner, очень популярный член основной команды Vue, написала о своей беседе с Evan You, создателем Vue JS. Сара показала, что миксин не может потреблять или использовать состояние из другого миксина, что затрудняет достижение цепочки инкапсулированной логики. Это недостаток mixin, которое решает Vue Hooks.

Введение Vue Hooks

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

Демо A: Vue mixins

Если вы читали этот пост с самого начала, вы, должно быть, скачали файл стартового проекта и открыли его в своем приложении VS Code. Мы собираемся создать миксин, содержащий логику счетчика, а затем импортировать его в любой компонент по выбору. Сначала создайте папку с именем mixins в корневом каталоге и создайте новый файл, назовите его clickMixin.js и скопируйте нижеприведенный блок кода:

export default { 
    data (){
      return{
        count: 1,
        double: 2
      }
    },
    methods: {
      clicked(){
       this.count++; 
       this.double = this.count*2;
      }
    }
  }

Этот миксин содержит логику счетчика, а также содержит переменную, которая возвращает удвоенное число, вы видите оператор экспорта, потому что он должен быть импортирован в выбранный вами компонент. Откройте ваш компонент Test.vue и скопируйте нижеприведенный блок кода:

<template>
  <div> 
    <button v-on:click="clicked()">Button 1</button>
    <h2>{{this.count}}</h2>
    <h2>{{this.double}}</h2>
  </div>
</template>
<script>
import clickMixin from '../Mixins/clickMixin'

export default {
  name: 'Test',
  mixins: [clickMixin]
}
</script>

Здесь вы видите, как миксины импортируются и регистрируются под именем, это свойство экземпляра Vue, как данные, методы или вычисляемые свойства. Вы также видите, что внутри шаблона у вас есть доступ к этому в JavaScript, так как он относится к миксинам (почти так же, как миксин был определен прямо внутри компонента). Если вы запускаете приложение на своем сервере разработки, оно должно выглядеть так:

Когда вы нажимаете кнопку 1, счетчик увеличивается на 1, а нижняя цифра вдвое больше, чем цифра, как предлагает шаблон в вашем коде.

Демо B: Vue Hooks

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

npm install vue-Hooks

Затем откройте ваш файл 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, вот некоторые из них:

• useData: выполняет инициализацию данных внутри вашего хука, поэтому счетчик инициализируется внутри него
• useComputed: это больше похоже на вычисляемые свойства внутри вашего хука, поэтому двойное вычисление выполняется внутри него
• useMounted: действует точно так же, как смонтированный Hook жизненного цикла в вашем экземпляре Vue, но для Hooks
• useUpdated: действует точно так же, как обновленный хук жизненного цикла в вашем экземпляре Vue, но для хуков
• useEffect: это обрабатывает логику при повторном рендере 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)
• Существует предположение, что Vue версии 3.0 будет поставляться с Vue Hooks официально
• Он экспериментален и поэтому не должен использоваться в продакшине
• Прочитайте пост в блоге Сары Драснер, который также содержит еще больше примеров

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

Заключение

Это был краткий обзор Hooks в Vue JS и того, как они отличаться от React Hooks, на базе которых они были созданы. Мы также рассмотрели миксины для читателей, которые не были знакомы с концепцией, и мы рассмотрели иллюстрацию с использованием хуков.