В текущем способе построения компонентов в Vue 2.x мы разделяем его по параметрам, а не по функциям. Это означает, что, например, одно состояние переключения для showTitle потребует наличия реактивных данных в data() и method для переключения состояния. Для небольшого простого компонента это не будет проблемой. Но по мере роста компонента будет добавляться больше функций, что затруднит чтение всей функции. Пример можно увидеть ниже.

Теперь это все еще может быть до некоторой степени читаемым, но, как вы можете видеть, мы начали сталкиваться с разными проблемами, связанными с функциональностью, разделенными на data и methods. Ситуация будет усложняться по мере роста компонента, не говоря уже о том, что нам нужно добавить computedили перехватчики жизненного цикла.

Теперь в Vue 2.x у нас есть mixins, который может решить эту проблему. Миксины можно использовать для функциональных целей, объединяя связанные методы завершения данных в один файл, а затем импортируя этот файл туда, где это необходимо. Для меня это все еще выглядит актуальным и подходит для большинства случаев (этот пост также не означает, что мы должны сделать его устаревшим). Однако обратная сторона этого заключается в том, что иногда нам нужно знать, что в нем происходит, чтобы решить, можем ли мы использовать его как есть, или нам нужно настроить его в соответствии с нашими потребностями. Нам нужно будет открыть файл, прочитать еще раз, а когда закончить, проверить другие места, где он используется, чтобы убедиться, что ни одно из них не сломалось. Другое дело, что существует большой потенциал того, что миксины могут иметь похожие имена, что создает различные проблемы.

Composition API

Предстоящий Composition API - это решение, которое Vue 3 представляет для решения вышеуказанных проблем. На момент написания (май 2020 г.) он все еще находится в стадии бета-тестирования, но мы уже можем его попробовать. Он может объединить связанные данные, методы и функции в одном месте вместо того, чтобы распространяться по всему файлу. Мы можем использовать его в существующих проектах Vue 2.x, установив дополнительный пакет npm.

npm i --save @vue-composition-api

После этого нам нужно будет импортировать пакет в наш app.jsfile, как мы видим ниже.

import Vue from "vue";
import VueCompositonApi from "@vue/composition-api";
...
Vue.use(VueCompositonApi);

Однако, если вы начинаете с нуля с Vue 3.0, мы можем напрямую импортировать все в файл .vue из vue. Например:

import { refs, reactive } from "vue";

Теперь мы можем получить доступ к функции setup() внутри нашего .vue файла. Эта функция запускается при инициализации компонента, действует как замена beforeCreate и created перехватчикам жизненного цикла. Теперь давайте посмотрим, как мы можем использовать некоторые из этих улучшений по сравнению с существующим API параметров в предыдущей версии Vue.

Реактивность данных

Реактивность - главное преимущество при использовании фреймворка Front End Javascript, такого как Vue. В Vue 2.5 мы определяем наши данные в data () function или data object. В Composition API нам нужно импортировать ref или reactive из vue/composition-api для достижения той же функциональности.

Оба ref и reactive могут сделать значение реактивным, но они имеют небольшие различия в использовании и доступе. ref можно напрямую назначить одной переменной или константам, а reactive можно использовать как обычную data функцию, которую мы часто используем в Vue 2.0, она сделает весь объект, который она охватывает, реактивным. Если вы видите выше, ref потребуется .value, чтобы мы имели доступ к его содержанию, а reactive может быть доступен напрямую.

Еще один способ реализовать реактивность - обернуть все значения как объект в функцию reactive. Таким образом, если нам нужно иметь вычисленное значение, мы можем получить к нему прямой доступ, не указывая .value. Например, мы воспользуемся приведенным выше кодом и заключим значения в реактивную функцию, а затем добавим вычисленное значение, которое обращается к значению result.

Однако у этой настройки есть недостаток. Нам также нужно будет изменить способ доступа к нему в шаблоне.

Естественно, если вы знакомы с ES6, мы сначала подумаем, что можем просто распространить объект при экспорте, например, return { …allData, logData }. Но это вызовет ошибку. Даже если вы укажете их один за другим, например, allData.total, значение потеряет свою реактивность.

Для этого Vue 3.0 представляет toRefs, который будет делать именно это. Функция преобразует каждое из значений объекта и отобразит его в собственном ref. После этого мы можем получить доступ к значениям в шаблоне, как и раньше.

Если нам не нужно обращаться ни к какому другому значению, кроме реактивного, мы можем просто сделать return …toRefs(allData)

Вычислено и смотри

Вычисленные значения можно добавить с помощью функции computed, импортированной из Vue, аналогично reactive. Он получает функцию, которая возвращает вычисленное значение, как мы это делали ранее в Options API.

Что касается Watch, мы можем назначить функцию просмотра с помощью watch, также импортированного из vue. То, что мы можем делать там, аналогично тому, что мы делали в предыдущей версии.

Реквизит

props похож на предыдущую версию. Но для того, чтобы он был доступен в setup функции, нам нужно передать его в качестве аргумента. Правило без деструктуры по-прежнему применяется, как если бы мы это сделали, мы потеряем реактивность.

Управление файлами

Зная это выше, некоторые из нас могут подумать, что это может сделать функцию setup гигантской в ​​кратчайшие сроки. Это контрастирует с темой улучшения читабельности, которую мы здесь обсуждаем. Но не бойтесь! Так же удобно, как и раньше, мы также можем передать связанные функции в отдельные файлы. В конце концов, это функции.

Испускают

Одно изменение для emit в новой версии заключается в том, что теперь нам предлагается объявить его в отдельном свойстве emits. Это действует как самостоятельная документация кода, гарантируя, что разработчики, которые приходят к компоненту, который они не сделали, понимают отношения с его родительским.

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

Крючки жизненного цикла

Мы также можем установить ловушки жизненного цикла в setup функции, предварительно импортировав onXXX . Важное замечание по этому поводу: мы не можем получить доступ к this в функции настройки. Если нам все еще нужно, например, передать в родительский объект при смонтированном, использование themounted хука из API опций, по-видимому, на данный момент является выходом.

Многокорневой шаблон

Как вы, возможно, уже знаете, в Vue 2.x у нас может быть только один корневой элемент в template. Однако больше не в Vue 3.0. Благодаря функции фрагментов наличие только одного корневого элемента больше не является обязательным.

Примечание. Ваш линтер может жаловаться на то, что это незаконно. У меня есть. Лучше всего сохранить это, пока у нас не будет надлежащего публичного релиза. Но, тем не менее, захватывающе.

Выводы

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

В списке предстоящих обновлений следующей версии на Vue гораздо больше возможностей. вы можете увидеть полный список и обновления в репозитории RFC Vue здесь: https://github.com/vuejs/rfcs.

Остальные особенности заслуживают отдельной статьи с подробными примерами. Больше об этом будет позже.

Источники