Vue.js

Зовнішній вигляд

На цій сторінці

Одно-файлові компоненти ​

Вступ ​

Одно-файлові компоненти Vue (відомі також як файли *.vue, скорочено SFC) — це спеціальний формат файлу, який дозволяє нам інкапсулювати шаблон, логіку та стиль компонента Vue в одному файл. Ось приклад SFC:

vue
<script>
export default {
  data() {
    return {
      greeting: 'Привіт, світе!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
vue
<script setup>
import { ref } from 'vue'
const greeting = ref('Привіт, світе!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Як ми бачимо, Vue SFC є природним розширенням класичного тріо HTML, CSS і JavaScript. Блоки <template>, <script> і <style> інкапсулюють та розміщують вид, логіку та стиль компонента в одному файлі. Повний синтаксис визначено в специфікації синтаксису SFC.

Чому SFC ​

Хоча для SFC потрібен етап збірки, у відповідь є численні переваги:

SFC є визначальною функцією Vue як фреймворку та є рекомендованим підходом для використання Vue у таких сценаріях:

  • Односторінкові програми (SPA)
  • Статична генерація сайту (SSG)
  • Будь-який нетривіальний інтерфейс, де етап збірки може бути виправданий для кращого досвіду розробки (DX).

Тим не менш, ми розуміємо, що є сценарії, коли SFC може здатися надмірним. Ось чому Vue все ще можна використовувати через звичайний JavaScript без етапу збірки. Якщо ви просто шукаєте покращення здебільшого статичного HTML за допомогою легкої взаємодії, ви також можете ознайомитися з petite-vue, підмножиною Vue розміром 6 КБ, оптимізованою для прогресивного вдосконалення .

Як це працює ​

Vue SFC — це формат файлу, що залежить від фреймворку, і його потрібно попередньо скомпільувати @vue/compiler-sfc у стандартний JavaScript і CSS. Скомпільований SFC — це стандартний модуль JavaScript (ES), що означає, що за належного налаштування збірки ви можете імпортувати SFC як модуль:

js
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

Теги <style> всередині SFC зазвичай вводяться як власні теги <style> під час розробки для підтримки гарячих оновлень. Для виробництва їх можна видобути та об’єднати в один файл CSS.

Ви можете пограти з SFC і дізнатися, як вони компілюються, на Vue SFC Playground.

У реальних проєктах ми зазвичай інтегруємо компілятор SFC із інструментом збірки, таким як Vite або Vue CLI (який базується на webpack), а Vue надає офіційні інструменти створення каркасів, які допоможуть вам якнайшвидше почати роботу з SFC. Ознайомтеся з додатковою інформацією в розділі Інструменти SFC.

Як щодо розділення завдань? ​

Деякі користувачі, які займаються традиційною веб-розробкою, можуть мати занепокоєння, що SFC змішують різні проблеми в одному місці, яке HTML/CSS/JS мали розділяти!

Щоб відповісти на це запитання, нам важливо погодитися, що відокремлення завданнь не дорівнює розділенню типів файлів. Кінцевою метою інженерних принципів є покращення обслуговування кодових баз. Розділення завданнь, якщо його догматично застосовувати як розділення типів файлів, не допомагає нам досягти цієї мети в контексті дедалі складніших інтерфейсних програм.

У розробці сучасного інтерфейсу користувача ми виявили, що замість того, щоб ділити кодову базу на три величезні шари, які переплітаються один з одним, має набагато більше сенсу розділити їх на слабко пов’язані компоненти та скласти їх. Усередині компонента його шаблон, логіка та стилі за своєю суттю пов’язані між собою, і розміщення їх у одному місці фактично робить компонент більш зв’язаним і придатним для обслуговування.

Зверніть увагу, навіть якщо вам не подобається ідея однофайлових компонентів, ви все одно можете скористатися функціями гарячого перезавантаження та попередньої компіляції, розділивши ваш JavaScript і CSS на окремі файли за допомогою Src Imports.

Редагувати цю сторінку на GitHub