Для студентов, которые мало знают о Vue3.0, когда они видят Composition API, помимо того, что они кажутся «высокими», они могут быть более сбиты с толку, и у них не может не быть много сомнений. в их сердцах. Что это? Где свято? Какие великие дела вы сделали? Какие обязанности вы взяли на себя?
Давайте кратко поговорим и объясним Vue3.0 Composition API понятными каждому словами.
What
Прежде всего, что означают эти два слова?
Композиция: композиция, сочетание
API: интерфейс прикладного программирования (интерфейс прикладного программирования) относится к некоторым предопределенным функциям, соглашение, используемое для взаимодействия между системами, компонентами и функциями.
Говоря о людях, что это значит в Vue3.0?
Китайское название: синтетическая функция
«С функциями в качестве носителя логические коды, связанные с бизнесом, извлекаются вместе, и общий пакет предоставляет соответствующие возможности для внешнего мира. Это API-интерфейс Composition».
Можно понять, что для нас это решение для организации кода и решения повторного использования логики.
Why
Тогда зачем использовать функции в качестве носителя в Vue3.0 для совместного извлечения связанных с бизнесом кодов?
Давайте посмотрим на текущую организацию кода Vue2.x:
export default {
props: {
……
},
data() {
return {
……
};
},
watch: {
……
},
computed: {
……
}
methods: {
……
}
Вышеупомянутый способ написания является привычным.Для реализации функции в компоненте могут быть следующие блоки кода:
- Получить параметры в реквизите
- определить переменные в данных
- Слушайте изменения в часах
- Определите вычисляемые свойства, которые необходимо использовать в вычисляемых
- Определите методы ответа на событие в методах
После написания кода таким образом, что произойдет, если кто-то другой посмотрит на код?
Если вам нужно найти логику какой-то функции, вам нужно постоянно прокручивать страницу, чтобы просмотреть код каждого модуля в этом компоненте, если логика кода очень сложная, прыгать очень неудобно!
Это текущая форма кода организации Vue2.x, называемая Options API, изображение выглядит следующим образом (обратите внимание на расположение области цветового блока):
Одна и та же цветная область на рисунке представляет тот же функциональный модуль, из-за чего создается впечатление, что весь код компонента относительно беспорядочный, блоки функционального кода расположены в шахматном порядке, а цвета перемежаются друг с другом, что делает его ослепительным.
Некоторые студенты могут сказать, что вы — основное использование, мы можем использовать Mixins, HOC, Renderless Components, чтобы избежать этой проблемы.
Вы правы, они могут решить эту проблему в определенной степени, но все они имеют некоторые проблемы в той или иной степени:
-
Источник данных в шаблоне не ясен. Например, когда в компоненте используется несколько миксинов, может быть сложно определить, из какого миксина происходит свойство, просто взглянув на шаблон. У HOC аналогичная проблема.
-
Конфликт пространства имен. Нет никакой гарантии, что примеси, разработанные разными разработчиками, не будут использовать одно и то же имя свойства или метода. У HOC аналогичная проблема с инъекционными пропсами.
-
представление. Как HOC, так и Renderless Components требуют дополнительной вложенности экземпляров компонентов для инкапсуляции логики, что приводит к ненужным потерям производительности.
Кроме того, интеграция существующего API Vue2.x с Typescript имеет некоторые проблемы, главным образом потому, что Vue полагается на этот контекст для создания свойств, и это имеет много волшебства в компонентах Vue по сравнению с простым JavaScript (например: это в функции, определенной в атрибуте методов указывает на экземпляр компонента, а не на объект методов).
В дополнение к вышеуказанным причинам Composition API имеет два преимущества:
-
Вывод типов: API-интерфейсы, основанные на функциях, естественным образом подходят для вывода типов, потому что TS имеет очень полную поддержку параметров функций, возвращаемых значений и дженериков.
-
Размер упаковки: API на основе функций Каждая функция может быть импортирована отдельно как именованный экспорт ES, что делает их очень удобными для дерева. В то же время, поскольку все имена функций и имена переменных внутри тела функции установки могут быть сжаты, эффективность сжатия выше.
На основе компромиссов всех сторон интегрирован Composition API.
Where
Сказав все это, где используется Composition API?
Нам нужно знать, что Composition API — это решение для логического объединения и повторного использования кода, а не решение для замены компонентов. Другими словами, как компоненты были разделены изначально и как они разделены сейчас, это никак не повлияет.
Однако организация кода внутри компонентов и повторное использование кода между компонентами тесно связаны с Composition API, например:
listenMouse.js
import { ref, onMounted, onUnmounted } from 'vue'
function useMouse() {
const x = ref(0)
const y = ref(0)
const update = e => {
x.value = e.pageX
y.value = e.pageY
}
onMounted(() => {
window.addEventListener('mousemove', update)
})
onUnmounted(() => {
window.removeEventListener('mousemove', update)
})
return { x, y }
}
export default useMouse;
Здесь определения переменных x, y, функции жизненного цикла onMounted, onUnmounted и обновление метода обновления объединены в одно.Функция useMouse используется как носитель для предоставления унифицированных сервисов API для мониторинга положения мыши. Так что сервис можно использовать в любом компоненте без ограничений.
Используйте сервис, предоставляемый listenMouse в компоненте, следующим образом:
<template>
<p>Mouse Position:</p>
<p>x:{{ x }},y:{{ y }}</p>
</template>
<script>
import useMouse from './listenMouse';
export default {
setup (props) {
let {x, y} = useMouse();
return {
x,
y
}
}
}
</script>
Используя метод Composition API, вы обнаружите, что логическое повторное использование очень простое, супер понятное, а код чище.Изображение выглядит следующим образом (просто обратите внимание на расположение области цветового блока):
Здесь одна и та же цветовая область представляет один и тот же функциональный модуль. Вы ясно увидите, что цветовые блоки расположены упорядоченно. Все они расположены по частям, отражая аккуратный код. Какую функцию нам нужно изменить, можно изменить непосредственно в какой. блок кода.
Это Composition API, когда нужно повторно использовать логику между компонентами, когда нужно удалить код в компоненте, мы можем использовать его с уверенностью!
How
Благодаря пониманию Composition API вы обнаружите, что в организации кода произошли большие изменения: избавьтесь от магии this в Vue2.x.
В Vue2.x мы часто используем это в нашем коде.Все реквизиты, данные и методы в компоненте привязаны к контексту this, а затем доступны через this.
Затем, после использования Compositon API, он будет очень гибким, когда дело доходит до извлечения и повторного использования логики между компонентами. Составная функция зависит только от своих параметров и глобально импортированных API-интерфейсов Vue, а не от волшебства в этом контексте. Нам нужно только извлечь часть кода в компоненте, который вы хотите использовать повторно, а затем экспортировать его как функцию.
Например, listenMouse.js в приведенном выше, экспортируйте useMouse отдельно, его можно использовать в других компонентах.
Однако у вещей может быть две стороны~
недостаток
Недавно я видел, как некоторые люди используют Composition API для отработки приложений, а функция невелика.Прочитав его, я думаю, что проблема "кода лапши" неизбежно появится в Composition API Vue3.0 в будущем!
Что такое «код лапши»?
Код лапши: управляющая структура кода сложная, запутанная, неясная по логике, вкупе с отношениями, что на некоторое время затрудняет понимание.
Пример изображения кода лапши:
Эта картина заставляет людей выглядеть растерянными, как спагетти, все смешанные вместе, трудно точно выяснить, как взаимосвязь между записью вызова и кодом является.
Зачем беспокоиться о «коде лапши»?
Различия между API параметров и API композиции были проанализированы выше, поэтому давайте суммируем их с другой стороны:
Соглашение API опций:
- Нам нужно установить параметры приема в реквизите
- Нам нужно установить переменные в данных
- Нам нужно установить вычисляемые свойства в вычисляемом
- Нам нужно установить свойство прослушивания в часах
- Нам нужно установить метод события в методах
Вы обнаружите, что Options APi согласуется с тем, где мы должны что-то делать, что, в свою очередь, заставляет нас в определенной степени разделять код.
Теперь с Composition API это соглашение больше не так, поэтому организация кода очень гибкая, и наш управляющий код может быть написан в настройке.
Если вы новичок, или кодофермер, который не думает серьезно, то в случае все более сложной логики объем кода сетапа увеличивается, а отдача в том же сетапе все более усложняется, и при посредничестве он неизбежно попадет в «спагетти-код».
Возьмем в качестве примера практику Composition API, о которой я говорил выше.
Как этого избежать?
У нас нет этого контекста, и у нас нет обязательного разделения кода API параметров. Composition API дает нам более широкий мир, поэтому нам нужно быть более осторожными в саморегулировании.
Для сложного логического кода мы должны уделять больше внимания первоначальному замыслу Composition API и не скупиться использовать Composition API для разделения кода и использовать его для разделения на различные модули для экспорта.
Мы ожидаем что-то вроде этого:
import useA from './a';
import useB from './b';
import useC from './c';
export default {
setup (props) {
let { a, methodsA } = useA();
let { b, methodsB } = useA();
let { c, methodsC } = useC();
return {
a,
methodsA,
b,
methodsB,
c,
methodsC
}
}
}
Несмотря на то, что объем кода в содержимом установки становится все больше и больше, он всегда движется вперед таким образом, чтобы он был большим, но не хаотичным и имел четкую структуру кода.
setup — это наш контроллер кода, старайтесь не писать много кода бизнес-логики. Всегда придерживайтесь идеи «разделить заботы с контроллером и уменьшить нагрузку на настройку» в коде!
Конечно, мы также должны избегать проклятия попадания в «код хаоса». Также необходимо поддерживать: высокую сплоченность, политику кодирования кода с низкой связью.
Давайте дождемся появления официальной версии Vue3.0!
Добро пожаловать, чтобы обратить внимание на мою общедоступную учетную запись WeChat, давайте вместе будем надежным интерфейсом!