Composition vs Options API

В Vue 3 ключевым изменением стала возможность использования Composition API наряду с традиционным Options API. Эти два подхода предоставляют разные способы организации кода, управления состоянием компонента и реактивностью, особенно при работе с крупными библиотеками, такими как Element Plus.

Options API основан на раздельной декларации логики компонента по категориям: data, methods, computed, watch, props. Этот подход удобен для небольших компонентов, где логика ограничена, и легко читается начинающими разработчиками.

Пример компонента с Options API и Element Plus:

<template>
  <el-button type="primary" @click="incrementCounter">Нажми меня</el-button>
  <p>Счётчик: {{ counter }}</p>
</template>

<script>
import { ElButton } from 'element-plus'

export default {
  components: { ElButton },
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter() {
      this.counter++
    }
  }
}
</script>

Здесь каждая часть логики четко отделена: состояние в data, действия в methods.

Преимущества Composition API

Composition API предоставляет более гибкий способ организации логики через функции setup(), реактивные переменные (ref, reactive), вычисляемые свойства (computed) и эффекты (watch). Он особенно полезен при работе с большими компонентами, где логика сложна и повторно используется в нескольких местах.

Пример того же компонента на Composition API с Element Plus:

<template>
  <el-button type="primary" @click="incrementCounter">Нажми меня</el-button>
  <p>Счётчик: {{ counter }}</p>
</template>

<script>
import { ref } from 'vue'
import { ElButton } from 'element-plus'

export default {
  components: { ElButton },
  setup() {
    const counter = ref(0)

    const incrementCounter = () => {
      counter.value++
    }

    return {
      counter,
      incrementCounter
    }
  }
}
</script>

Ключевые особенности Composition API:

  • Логика компонента группируется по функциональности, а не по типу опций. Например, состояние и методы, относящиеся к счетчику, находятся вместе.
  • Легко создавать переиспользуемые функции и composables, которые можно подключать в разных компонентах.
  • Более предсказуемая реактивность благодаря ref и reactive.

Работа с Element Plus через Composition API

Эта библиотека идеально сочетается с Composition API, особенно при использовании сложных компонентов, таких как ElTable, ElForm, ElDialog.

Пример с формой и валидацией

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="Имя" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="Возраст" prop="age">
      <el-input-number v-model="form.age"></el-input-number>
    </el-form-item>
    <el-button type="primary" @click="submitForm">Отправить</el-button>
  </el-form>
</template>

<script>
import { reactive, ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElInputNumber, ElButton } from 'element-plus'

export default {
  components: { ElForm, ElFormItem, ElInput, ElInputNumber, ElButton },
  setup() {
    const formRef = ref(null)
    const form = reactive({
      name: '',
      age: null
    })
    const rules = reactive({
      name: [{ required: true, message: 'Введите имя', trigger: 'blur' }],
      age: [{ type: 'number', required: true, message: 'Введите возраст', trigger: 'blur' }]
    })

    const submitForm = () => {
      formRef.value.validate(valid => {
        if (valid) {
          console.log('Форма отправлена:', form)
        } else {
          console.log('Ошибка валидации')
        }
      })
    }

    return {
      form,
      rules,
      formRef,
      submitForm
    }
  }
}
</script>

Преимущества этого подхода:

  • Состояние формы (form) и правила валидации (rules) расположены рядом с логикой отправки (submitForm), что упрощает чтение.
  • Легко создавать повторно используемые функции валидации для нескольких форм.

Сравнение подходов на практике

Особенность Options API Composition API
Организация кода По типу (data, methods) По функциональности
Переиспользование логики Ограниченное Простое через composables
Поддержка TypeScript Меньше преимуществ Полная поддержка, типизация проще
Подход к реактивности this, реактивные свойства автоматически ref, reactive для явной реактивности
Масштабируемость Труднее при больших компонентах Удобно для крупных проектов

Рекомендации при работе с Element Plus

  • Для простых интерфейсов с несколькими кнопками и формами можно использовать Options API.
  • Для сложных компонентов с таблицами, диалогами и динамическими формами предпочтительнее Composition API.
  • Использование composables позволяет выносить общую логику (например, API-запросы или управление состоянием формы) в отдельные модули.
  • При подключении Element Plus к проекту на Composition API стоит всегда использовать ref и reactive для отслеживания состояния компонентов и их методов.

Итоговые моменты

  • Composition API обеспечивает гибкость и удобство масштабирования, особенно при работе с библиотекой Element Plus.
  • Options API сохраняет простоту и ясность для небольших компонентов.
  • Использование Composition API позволяет логически группировать состояние, методы и эффекты, что делает код более модульным и предсказуемым.
  • В больших проектах на Element Plus именно Composition API становится ключевым инструментом для управления сложными интерфейсами.
Оглавление