Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🌸

Как эффективно использовать Vue Composition API

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

Почему важно:

📍 Повышает читаемость и поддерживаемость кода

📍 Облегчает тестирование

📍 Улучшает повторное использование логики

1. Основы Composition API:


import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubledCount = computed(() => count.value * 2);

    const increment = () => {
      count.value++;
    };

    return { count, doubledCount, increment };
  },
};

— ref(): создаёт реактивные данные для примитивных типов.

— computed(): создаёт вычисляемые значения.

2. Создание повторно используемой логики:

Можно создать отдельные функции для логики, чтобы повторно использовать её в разных компонентах.


// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  
  return { count, increment };
}

Теперь используем в компоненте:


import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();
    
    return { count, increment };
  },
};

3. Работа с API и асинхронными данными:


import { ref } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const loading = ref(true);
  
  fetch(url)
    .then(response => response.json())
    .then(fetchedData => {
      data.value = fetchedData;
      loading.value = false;
    });

  return { data, loading };
}

Используем в компоненте:


import { useFetch } from './useFetch';

export default {
  setup() {
    const { data, loading } = useFetch('https://api.example.com');

    return { data, loading };
  },
};

💡 Рекомендации:

— Разделяйте логику на composition functions для улучшения читаемости.

— Используйте ref для примитивов и reactive для объектов.

— Используйте computed для вычисляемых значений, а не для хранения состояния.

🐸

Библиотека фронтендера

#буст

Please open Telegram to view this post