iturdikulov.com logoiturdikulov.com

Graph View

4 min read

Vue.js - основы

Vue - JavaScript фреймворк для создания пользовательских интерфейсов.

Основа - JS, HTML, CSS, предоставляет декларативную компонентную модель программирования для разработки интерфейсов.

Обычно Vue приложение состоит из множества компонентов. Компонент - это сущность (шаблон для компиляции) состоящий из JavaScript, HTML и CSS в одном файле.

Vue спроектирован так, чтобы быть гибким и постепенно адаптируемым (прогрессивным). В зависимости от сценария использования Vue можно использовать по-разному:

  • Улучшать статический HTML без добавления этапа сборки
  • Встраиваться в качестве веб-компонентов на любой странице
  • Собирать одно-страничные приложения (SPA)
  • Fullstack / Отрисовка на стороне сервера (SSR)
  • Jamstack / Генерация статического сайта (SSG)
  • Нацеленность на настольные, мобильные устройства, WebGL и даже терминалы

Маленький пример компонента для инкремента счётчика:

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
 
<template>
  <button @click="count++">Счётчик: {{ count }}</button>
</template>
 
<style scoped>
button {
  font-weight: bold;
}
</style>

Компоненты Vue можно создавать с использованием двух различных стилей: Options API и Composition API.

Основа JS фреймоврка Vue: для чего он нужен, парадигмы? Фреймворк для создания пользовательский интерфейсов, декларативная и компонентная модель программирования.

Почему Vue называют «прогрессивным» фреймворком? Потому что он спроектирован быть гибким и постепенно адаптируемым. Его можно использовать как для простого улучшения статического HTML, так и для создания сложных Fullstack-приложений (SSR) или SPA.

Options API

Options API сосредоточен вокруг концепции «экземпляра компонента» (this, как показано в примере), что обычно лучше согласуется с моделью мышления, основанной на классах, для пользователей с опытом работы с языками ООП. Он также более удобен для новичков, поскольку абстрагируется от деталей реактивности и обеспечивает организацию кода с помощью групп опций.

Логика компонентов определяется с помощью объекта опций, таких как data, methods и mounted.

<script>
export default {
  // Свойства возвращаемые из data() становятся реактивным
  // состоянием компонента и к ним можно обращаться через `this`.
  data() {
    return {
      count: 0
    }
  },
 
  // Методы это функции, которые мутируют состояние и вызывают обновления.
  // Они могут быть привязаны в качестве обработчиков событий в шаблонах.
  methods: {
    increment() {
      this.count++  // NOTE: `this` указывает на экземпляр компонента
    }
  },
 
  // Хуки жизненного цикла (lifecycle hooks) вызываются на разных этапах
  // жизненного цикла компонента.
  // Эта функция будет вызвана после монтирования компонента.
  mounted() {
    console.log(`Стартовое значение счётчика — ${this.count}.`)
  }
}
</script>
 
<template>
  <button @click="increment">Счётчик: {{ count }}</button>
</template>

На какой концепции сосредоточен Options API? На концепции «экземпляра компонента». Код организуется с помощью групп опций в объекте (data, methods, computed, mounted и т.д.), а доступ к состоянию осуществляется через ключевое слово this (как в классах ООП).

За что отвечают опции data, methods и computed в Options API?

  • data(): функция, возвращает объект с реактивным состоянием компонента.
  • methods: содержит функции, которые мутируют состояние и могут служить обработчиками событий.
  • computed: вычисляемые свойства, которые кэшируются и обновляются только при изменении зависимостей.

Composition API

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

Здесь мы просто импортируем функции для определения логики компонента.

<!-- setup - подсказка компилятору для выполнения специальных преобразований на этапе компиляции, например импорты и переменные / функции, объявленные на верхнем уровне в <script setup> можно использовать напрямую в шаблоне. -->
<script setup>
import { ref, onMounted } from 'vue'
 
// реактивное состояние
const count = ref(0)
 
// функции которые мутируют состояние и вызывают обновления
function increment() {
  count.value++
}
 
// хуки жизненного цикла
onMounted(() => {
  console.log(`Стартовое значение счётчика — ${count.value}.`)
})
</script>
 
<template>
  <button @click="increment">Счётчик: {{ count }}</button>
</template>

В чем основное отличие Composition API от Options API в плане объявления состояния? В Composition API переменные реактивного состояния объявляются непосредственно в области видимости функции (без использования this и объекта опций).

Какую роль играет атрибут setup в теге <script setup>? Это подсказка компилятору. Она позволяет использовать импорты, переменные и функции, объявленные на верхнем уровне скрипта, напрямую внутри HTML-шаблона.

Какое главное преимущество дает Composition API? Избегает проблем с контекстом выполнения JS. Он позволяет разработчикам использовать функциональный, реактивный стиль программирования в Vue для создания компонентов, что упрощает повторное использование логики и управление зависимостями кода.

Backlinks

Recent Notes