Skip to content

Commit

Permalink
fix(composition-api-faq): fix some translation errors (#327)
Browse files Browse the repository at this point in the history
Signed-off-by: Evgeniy Gromin <[email protected]>
  • Loading branch information
JonikUl authored Feb 3, 2024
1 parent 2963a6e commit dbdb519
Showing 1 changed file with 11 additions and 11 deletions.
22 changes: 11 additions & 11 deletions src/guide/extras/composition-api-faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Composition API - это набор API, который позволяет на

- [Инъекция зависимостей](/api/composition-api-dependency-injection), то есть `provide()` и `inject()`, которые позволяют нам использовать систему dependency injection при использовании Reactivity API.

Composition API встроено во Vue 3 и [Vue 2.7](https://blog.vuejs.org/posts/vue-2-7-naruto.html). Для более старых версий Vue 2 используйте официально поддерживаемую версию [`@vue/composition-api`](https://github.com/vuejs/composition-api) плагина. В Vue 3, он также в основном используется вместе с [`<script setup>`](/api/sfc-script-setup) синтаксисом в однофайловых компонентах. Вот базовый пример компонента, использующего Composition API:
Composition API встроено во Vue 3 и [Vue 2.7](https://blog.vuejs.org/posts/vue-2-7-naruto.html). Для более старых версий Vue 2 используйте официально поддерживаемый плагин [`@vue/composition-api`](https://github.com/vuejs/composition-api). В Vue 3, он также в основном используется вместе с [`<script setup>`](/api/sfc-script-setup) синтаксисом в однофайловых компонентах. Вот базовый пример компонента, использующего Composition API:

```vue
<script setup>
Expand Down Expand Up @@ -80,19 +80,19 @@ onMounted(() => {

![компонент папки после](./images/composition-api-after.png)

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

### Лучшее выведение типов {#better-type-inference}

В последние годы все больше и больше разработчиков интерфейсов переходят на [TypeScript](https://www.typescriptlang.org/) поскольку это помогает нам писать более надежный код, вносить изменения с большей уверенностью и обеспечивает отличный опыт разработки с поддержкой IDE. Однако API параметров, изначально задуманный в 2013 году, был разработан без учета вывода типов. Нам пришлось реализовать некоторые [абсурдно сложно изгибающиеся типы](https://github.com/vuejs/core/blob/44b95276f5c086e1d88fa3c686a5f39eb5bb7821/packages/runtime-core/src/componentPublicInstance.ts#L132-L165) чтобы вывод типов работал с Options API. Даже при всех этих усилиях вывод типов для Options API может по-прежнему не работать для mixins и dependency injection.
В последние годы все больше и больше разработчиков интерфейсов переходят на [TypeScript](https://www.typescriptlang.org/) поскольку это помогает нам писать более надежный код, вносить изменения с большей уверенностью и обеспечивает отличный опыт разработки с поддержкой IDE. Однако Options API, изначально задуманный в 2013 году, был разработан без учета вывода типов. Нам пришлось реализовать некоторые [абсурдно сложные гимнастические упражнения с типами](https://github.com/vuejs/core/blob/44b95276f5c086e1d88fa3c686a5f39eb5bb7821/packages/runtime-core/src/componentPublicInstance.ts#L132-L165), чтобы вывод типов работал с Options API. Даже при всех этих усилиях вывод типов для Options API может по-прежнему не работать для mixins и dependency injection.

Это привело к тому, что многие разработчики, которые хотели использовать Vue с TS склонялись к Class API основанному на `vue-class-component`. Однако API на основе классов в значительной степени зависит от декораторов ES, языковой функции, которая была предложена только на этапе 2, когда Vue 3 разрабатывался в 2019 году. Мы посчитали слишком рискованным основывать официальный API на нестабильном предложении. С тех пор предложение декораторов претерпело еще одну полную переработку, и наконец, достигло 3 этапа в 2022 году. Кроме того, API на основе классов страдает от повторного использования логики и организационных ограничений, подобных Options API.

Для сравнения, Composition API использует в основном простые переменные и функции, которые, естественно, дружественны к типам. Код, написанный в Composition API может использовать полный вывод типов с небольшой потребностью в ручных подсказках. Большую часть времени, код Composition API будет выглядеть практически одинаково в TypeScript и простом JavaScript. Это также позволяет обычным пользователям JavaScript извлекать выгоду из частичного вывода типов.

### Меньший размер production сборки и меньше накладных расходов {#smaller-production-bundle-and-less-overhead}

Код, написанный в Composition API и `<script setup>` также более эффективен и удобен для минификации, чем аналогичный API Options. Это связано с тем, что шаблон в компоненте `<script setup>` скомпилирован как функция встроенная в ту же область действия кода `<script setup>`. В отличие от доступа к свойствам через `this`, скомпилированный код шаблона может напрямую обращаться к переменным, объявленным внутри `<script setup>`, без промежуточного прокси экземпляра. Это также приводит к лучшей минимизации, поскольку все имена переменных можно безопасно сократить.
Код, написанный в Composition API и `<script setup>` также более эффективен и удобен для минификации, чем аналогичный в Options API. Это связано с тем, что шаблон в компоненте `<script setup>` скомпилирован как функция встроенная в ту же область действия кода `<script setup>`. В отличие от доступа к свойствам через `this`, скомпилированный код шаблона может напрямую обращаться к переменным, объявленным внутри `<script setup>`, без промежуточного прокси экземпляра. Это также приводит к лучшей минимизации, поскольку все имена переменных можно безопасно сократить.

## Связь с Options API {#relationship-with-options-api}

Expand All @@ -109,20 +109,20 @@ Options API позволяет вам «меньше думать» при на
Да, с точки зрения логики состояния. При использовании Composition API может понадобиться всего несколько параметров: `props`, `emits`, `name`, and `inheritAttrs`. Если используется `<script setup>`, то `inheritAttrs` обычно является единственным параметром, для которого может потребоваться отдельный обычный `<script>` блок.

:::tip
Since 3.3 you can directly use `defineOptions` in `<script setup>` to set the component name or `inheritAttrs` property
С версии 3.3 вы можете напрямую использовать `defineOptions` в `<script setup>` чтобы установить имя компонента или свойство `inheritAttrs`
:::

Если вы намерены использовать исключительно Composition API (наряду с перечисленными выше параметрами), вы можете уменьшить сборку для production на несколько килобайт с помощь [compile-time flag](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags) который удаляет код, связанный с API параметров, из Vue. Обратите внимание, что это также влияет на компоненты Vue в ваших зависимостях.
Если вы намерены использовать исключительно Composition API (наряду с перечисленными выше параметрами), вы можете уменьшить сборку для production на несколько килобайт с помощь [compile-time flag](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags) который удаляет код, связанный с Options API, из Vue. Обратите внимание, что это также влияет на компоненты Vue в ваших зависимостях.

### Могу ли я использовать совместно оба API? {#can-i-use-both-apis-together}

Да. Вы можете использовать Composition API через [`setup()`](/api/composition-api-setup) в компоненте Options API.

Однако мы рекомендуем делать это только в том случае, если у вас есть существующая кодовая база Options API которую необходимо интегрировать с новыми функциями/внешними библиотеками, написанными с помощью Composition API.

### Будет ли Options API объявлена устаревшим? {#will-options-api-be-deprecated}
### Будет ли Options API объявлен устаревшим? {#will-options-api-be-deprecated}

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

## Связь с Class API {#relationship-with-class-api}

Expand All @@ -136,17 +136,17 @@ React Hooks повторно вызываются каждый раз при о

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

- Переменные, объявленные в компоненте React, могут быть захвачены замыканием хука и стать «устаревшими», если разработчику не удастся передать правильный массив зависимостей. Это приводит к тому, что разработчики React полагаются на правила ESLint для обеспечения передачи правильных зависимостей. Однако правило часто недостаточно умно и чрезмерно компенсирует правильность, что приводит к ненужной недействительности и головной боли при возникновении крайних случаев.
- Переменные, объявленные в компоненте React, могут быть захвачены замыканием хука и стать «устаревшими», если разработчику не удастся передать правильный массив зависимостей. Это приводит к тому, что разработчики React полагаются на правила ESLint для обеспечения передачи правильных зависимостей. Однако правило часто недостаточно умно и чрезмерно компенсирует правильность, что приводит к ненужной инвалидации и головной боли при возникновении крайних случаев.

- Дорогие вычисления требуют использования `useMemo`, что опять же требует ручной передачи правильного массива зависимостей.

- Обработчики событий, передаваемые дочерним компонентам, по умолчанию вызывают ненужные дочерние обновления и требуют явного `useCallback` в качестве оптимизации. Это необходимо почти всегда и опять же требует корректного массива зависимостей. Пренебрежение этим приводит к чрезмерному рендерингу приложений по умолчанию и может вызвать проблемы с производительностью, даже не осознавая этого.

- Проблема устаревшего замыкания в сочетании с параллельными функциями затрудняет определение того, когда запускается часть кода хуков, и делает работу с изменяемым состоянием, которое должно сохраняться при рендеринге (через `useRef`) громоздкой.
- Проблема устаревшего замыкания в сочетании с параллельными функциями затрудняет определение того, когда запускается часть кода хуков, и делает затруднительной работу с изменяемым состоянием, которое должно сохраняться при рендеринге (через `useRef`).

Для сравнения, Vue Composition API:

- Вызывает код `setup()` или `<script setup>` только один раз. Это позволяет коду лучше согласовываться с интуицией идиоматического использования JavaScript, поскольку не нужно беспокоиться об устаревших замыканиях. Вызовы API композиции также не зависят от порядка вызовов и могут быть условными.
- Вызывает код `setup()` или `<script setup>` только один раз. Это делает код более соответствующим интуитивному использованию идиоматического JavaScript, поскольку не нужно беспокоиться об устаревших замыканиях. Вызовы Composition API также не зависят от порядка вызовов и могут быть условными.

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

Expand Down

0 comments on commit dbdb519

Please sign in to comment.