Англійська для розробників Vue

Перехід Vue з Options API на Composition API змінив не тільки те, як код був написаний, але і те, як команди обговорювали його. Такі терміни, як «реактивний посилання», «композітивний» і «проп буріння» тепер домінують в перегляді коду Vue і обговореннях дизайну. У цьому підручнику наведено англійську лексику, яка потрібна для безпечного спілкування з компонентами Vue.

Ключовий словник

** Реактивна посилання (ref) ** — реактивне значення створене за допомогою ref(), доступне і мутоване за допомогою його властивості .value всередині коду скрипту, і розгорнуте автоматично у шаблонах. “Не деструктуруйте цю референцію безпосередньо у батьківському об’ єкті — ви втратите реактивність; або зберігайте її як властивість об’ єкта, або використовуйте toRefs.”

Composable — функція, яка інкапсулює і повторно використовує реактивну логіку (часто з префіксом use, як useFetch ), еквівалент Vue нетипового гачка React.

• “Витягнути цю логіку сторінкування у власну таблицю, щоб її можна було використовувати як у таблиці, так і у перегляді картки.” *

** Компонент з одним файлом (SFC) ** — файл .vue, що поєднує шаблон, скрипт і обмежений стиль у одному місці, скомпільований у компонент JavaScript під час збирання. “Треба зосередити увагу розділу скрипту SFC на логіці — якщо шаблон стає важко сканувати, це зазвичай є ознакою розділення на дочірній компонент.”

** Проп- буріння ** — передавання даних через декілька шарів компонентів, які самі не використовують їх, лише для того, щоб дістатися до глибоко вкладеного дочірнього компонента. “Ми продовжуємо свердління об’єкта користувача через чотири компоненти — це хороший кандидат для provide / inject замість цього.”

** Watcher ** — функція ( watch або watchEffect ), яка виконує побічні ефекти у відповідь на зміни реактивного стану, відмінні від обчислюваних властивостей, які походять і кешують значення. “Не шукайте тут спостерігача — це значення чисто похідне від іншого стану, тому обчислена властивість є найкращим підходом.”

** Слот з обсягом дії ** — слот, який надає змогу дочірньому компоненту передавати дані назад до вмісту батьківського слота, що надає змогу гнучкому, керованому даними складанню шаблонів.

• “Виявлення даних рядка через слот з обсягом замість твердого кодування розмітки стовпчика — таким чином користувачі можуть налаштувати відтворення комірки самостійно.” *

Звичайні фрази

• Чи є цей стан насправді реактивним, чи ми втратили реактивність, деструктурувавши референтний стан?»
• Чи повинна ця логіка жити в композитному, щоб інші компоненти могли її повторно використовувати?»
• Чи ми спостерігаємо за цим значенням, коли обчислена властивість була б простішою і більш передбачуваною?
• Як глибоко цей снаряд буриться — чи це час для provide / inject або магазину?
• Чи цей об’єктний слот виставляє достатньо даних для споживачів, щоб налаштувати рядок без розгалуження компонента?

Приклади висловлювань

Перегляд запиту на звантаження: “Ця компонента викликає onMounted внутрішньо, що означає, що вона працює тільки всередині налаштувань компонента — варто зауважити, щоб ніхто не намагався викликати її з звичайного файла програми.”

Пояснення рішення про проектування:

• “Ми перенесли логіку спільної корзини до магазину Pinia замість того, щоб пробурювати її через три рівні, оскільки дві не пов’ язані сторінки повинні читати і мутувати її.” *

Опис події:

• “Застаріла помилка інтерфейсу користувача була викликана деструктуруванням посилання у батьківському компоненті — дочірній компонент зберігав початковий знімок замість реактивного посилання.” *

Професійні поради

• Кажіть “composable”, а не “hook,” коли обговорюєте специфічну для Vue логіку повторного використання — це сигналізує, що ви знаєте власну термінологію фрейму, а не тільки React.
• Розрізняти “обчислено” від “наглядова” явно в коментарях до перегляду — переглядачі часто використовують прапорці наглядових, де похідне значення буде простіше і менш схильним до помилок.
• Використовуйте “unwrap the ref” для опису доступу до .value — це точний скорочений варіант, який досвідчені розробники Vue розпізнають негайно.
• Коли пропонуєте рефактор, назовите цільовий шаблон явно — “provide/inject” або “a Pinia store” — замість того, щоб нечітко сказати “share the state better.”

Практичні вправи

1. Поясніть двома реченнями, чому деструктурування референції може порушувати реактивність.
2. Написати коментар перегляду коду у одному реченні, який пропонує витягування з можливістю компонування.
3. Опишемо вашими словами відмінність між обчисленою властивістю і спостерігачем.

На практиці: Навігація Nuance — професійна комунікація для розробників Vue

Як не рідною англійською мовою, що занурюється в професійний розвиток, особливо з такими фреймворками, як Vue.js, ви швидко усвідомите, що це не тільки про знання * технічного * словника - це про ефективне спілкування в такий спосіб, який є ясним, точним і демонструє ваше розуміння найкращих практик. Незначні відмінності у формулюваннях можуть значно вплинути на те, як буде сприйнятий ваш код, особливо під час перегляду коду або співпраці з міжнародними командами. Давайте розглянемо, як працювати з поширеними сценаріями, де точний вираз англійською мовою має величезне значення.

Одна з найчастіших ситуацій виникає під час перегляду коду. Уявіть, що ви отримали цей коментар на PR: “Цей компонент може отримати користь від більш явної реактивності. Розгляньте можливість використання властивості ref для безпосереднього маніпулювання даними і запуску оновлення.” Тепер простого перекладу « use ref » недостатньо. Краще відповідь— і така, що демонструє, що ви зрозуміли зворотній зв’язок— буде: “Дякую за вказівку на це! Я розгляну використання ref для керування станом безпосередньо і забезпечення негайної реактивності при змінах. Я також перегляну, як це впливає на продуктивність, оскільки надмірне маніпулювання референсами може іноді вводити непотрібні перевідтворення. “Це демонструє, що ви зрозуміли * чому * за пропозицією - це не просто про « використання референсів »; це про поліпшення реактивності і розгляд потенційних наслідків. Аналогічно, повідомлення Slack, що вимагає пояснення складного рішення управління станом, вимагає більше, ніж простого «Що ви маєте на увазі?» Продуктивна відповідь може бути: «Щоб переконатися, що ми зрівнялися з цим підходом з Pinia, чи можете ви розглянути конкретні проблеми з продуктивністю, які ви визначили при використанні реактивного магазину для цих даних?»

Інша область, де точність мови є критичною, це описи запитів на завантаження. Нечіткий опис, наприклад, « Виправлена помилка », не допоможе. Замість цього, націляйтеся на щось детальніше: «Вреалізовано виправлення для проблеми #1234 — неправильне відображення інформації про профілі користувачів через застарілий виклик API. Оновлено функцію fetch для використання останньої кінцевої точки і додано обробку помилок для елегантного керування потенційними проблемами мережі. “Це надає контекст, пояснює * що * було виправлено, * чому *, і демонструє увагу до деталей — всіх важливих елементів професійного спілкування.

Нарешті, пам’ ятайте, що активний голос зазвичай є кращим у технічному письмі. Замість того, щоб сказати « Дані було оновлено », скажіть « Я оновив дані ». Це буде більш прямим і чітким вказати, хто виконав дію. Крім того, використання таких термінів, як « реалізувати » або « перефункціонувати » показує рівень розуміння, що виходить за рамки простого опису того, що ви зробили.

Ось приклад використання vue-cli для створення компонента з урахуванням реактивності:

vue create my-component --template js
cd my-component
# Modify src/components/MyComponent.vue to use ref for reactivity