Mixins в Vue

▸Определение

Mixins — это способ переиспользования кода в Options API. Они позволяют включать общую логику в компоненты.

▸Создание mixin

1// mixins/dateFormat.js
2export default {
3  data() {
4    return {
5      currentDate: new Date(),
6    };
7  },
8  computed: {
9    formattedDate() {
10      return this.currentDate.toLocaleDateString('ru-RU');
11    },
12  },
13  methods: {
14    formatDate(date) {
15      return date.toLocaleDateString('ru-RU');
16    },
17  },
18};

▸Использование

vue

1<script>
2import dateFormat from '@/mixins/dateFormat';
3
4export default {
5  mixins: [dateFormat],
6  mounted() {
7    console.log(this.formattedDate);
8  },
9};
10</script>

Проблемы Mixins

▸Конфликты имён

1// mixin1.js
2export default {
3  data() {
4    return { count: 0 };
5  },
6};
7
8// mixin2.js
9export default {
10  data() {
11    return { count: 10 }; // конфликт!
12  },
13};

▸Неочевидные зависимости

Компонент может использовать методы и данные из mixin, но непонятно откуда они берутся.

▸Трудности с отладкой

Ошибки в mixin сложно отслеживать, особенно когда их несколько.

▸TypeScript

Mixins плохо работают с TypeScript. Типизация затруднена.

Composables в Vue 3

▸Определение

Composables — это функции, использующие Vue hooks для переиспользования логики. Это рекомендуемый подход в Vue 3.

▸Создание composable

1// composables/useDateFormat.js
2import { ref, computed } from 'vue';
3
4export function useDateFormat() {
5  const currentDate = ref(new Date());
6
7  const formattedDate = computed(() =>
8    currentDate.value.toLocaleDateString('ru-RU')
9  );
10
11  function formatDate(date) {
12    return date.toLocaleDateString('ru-RU');
13  }
14
15  return { currentDate, formattedDate, formatDate };
16}

▸Использование

vue

1<script setup>
2import { useDateFormat } from '@/composables/useDateFormat';
3
4const { formattedDate, formatDate } = useDateFormat();
5</script>

Преимущества Composables

▸Явные зависимости

Все зависимости видны в месте использования. Нет скрытого кода.

▸Отсутствие конфликтов

Каждый composable возвращает свой набор значений. Конфликты исключены.

▸TypeScript

Composables полностью поддерживают TypeScript. Дженерики работают отлично.

▸Tree-shaking

Composables tree-shakeаются автоматически. Ненужный код не попадает в bundle.

Паттерны Composables

▸useCounter

1import { ref } from 'vue';
2
3export function useCounter(initialValue = 0) {
4  const count = ref(initialValue);
5
6  const increment = () => count.value++;
7  const decrement = () => count.value--;
8  const reset = () => (count.value = initialValue);
9
10  return { count, increment, decrement, reset };
11}

▸useFetch

1import { ref, watchEffect } from 'vue';
2
3export function useFetch(url) {
4  const data = ref(null);
5  const loading = ref(true);
6  const error = ref(null);
7
8  watchEffect(async () => {
9    try {
10      loading.value = true;
11      const response = await fetch(url);
12      data.value = await response.json();
13    } catch (err) {
14      error.value = err;
15    } finally {
16      loading.value = false;
17    }
18  });
19
20  return { data, loading, error };
21}

▸useLocalStorage

1import { ref, watch } from 'vue';
2
3export function useLocalStorage(key, initialValue) {
4  const stored = ref(
5    JSON.parse(localStorage.getItem(key)) || initialValue
6  );
7
8  watch(stored, (newValue) => {
9    localStorage.setItem(key, JSON.stringify(newValue));
10  }, { deep: true });
11
12  return stored;
13}

Миграция с Mixins

▸Пошаговая миграция

Создайте composable из логики mixin

Замените mixin на import composable

Обновите компонент для использования composable

Удалите mixin

▸Параллельная работа

Вы можете использовать mixins и composables одновременно, что позволяет мигрировать постепенно.

Когда использовать Mixins

Существующий проект на Vue 2

Простая логика без конфликтов

Быстрый прототип

Когда использовать Composables

Новый проект на Vue 3

Сложная логика с множеством зависимостей

TypeScript критически важен

Нужна явная документация зависимостей

Заключение

Composables — это будущее переиспользования логики во Vue. Они проще, безопаснее и лучше работают с TypeScript. Мигрируйте с mixins постепенно, начиная с новых компонентов.

#vue#mixins#composables#reuse#architecture

Vue.js≈ 12 мин чтения25 апреля 2024 г.

Mixins vs Composables: переиспользование логики

Сравнение mixins и composables в Vue: преимущества, недостатки и миграция с mixins на composables.

Mixins в Vue

▸Определение

Mixins — это способ переиспользования кода в Options API. Они позволяют включать общую логику в компоненты.

▸Создание mixin

1// mixins/dateFormat.js
2export default {
3  data() {
4    return {
5      currentDate: new Date(),
6    };
7  },
8  computed: {
9    formattedDate() {
10      return this.currentDate.toLocaleDateString('ru-RU');
11    },
12  },
13  methods: {
14    formatDate(date) {
15      return date.toLocaleDateString('ru-RU');
16    },
17  },
18};

▸Использование

vue

1<script>
2import dateFormat from '@/mixins/dateFormat';
3
4export default {
5  mixins: [dateFormat],
6  mounted() {
7    console.log(this.formattedDate);
8  },
9};
10</script>

Проблемы Mixins

▸Конфликты имён

1// mixin1.js
2export default {
3  data() {
4    return { count: 0 };
5  },
6};
7
8// mixin2.js
9export default {
10  data() {
11    return { count: 10 }; // конфликт!
12  },
13};

▸Неочевидные зависимости

Компонент может использовать методы и данные из mixin, но непонятно откуда они берутся.

▸Трудности с отладкой

Ошибки в mixin сложно отслеживать, особенно когда их несколько.

▸TypeScript

Mixins плохо работают с TypeScript. Типизация затруднена.

Composables в Vue 3

▸Определение

Composables — это функции, использующие Vue hooks для переиспользования логики. Это рекомендуемый подход в Vue 3.

▸Создание composable

1// composables/useDateFormat.js
2import { ref, computed } from 'vue';
3
4export function useDateFormat() {
5  const currentDate = ref(new Date());
6
7  const formattedDate = computed(() =>
8    currentDate.value.toLocaleDateString('ru-RU')
9  );
10
11  function formatDate(date) {
12    return date.toLocaleDateString('ru-RU');
13  }
14
15  return { currentDate, formattedDate, formatDate };
16}

▸Использование

vue

1<script setup>
2import { useDateFormat } from '@/composables/useDateFormat';
3
4const { formattedDate, formatDate } = useDateFormat();
5</script>

Преимущества Composables

▸Явные зависимости

Все зависимости видны в месте использования. Нет скрытого кода.

▸Отсутствие конфликтов

Каждый composable возвращает свой набор значений. Конфликты исключены.

▸TypeScript

Composables полностью поддерживают TypeScript. Дженерики работают отлично.

▸Tree-shaking

Composables tree-shakeаются автоматически. Ненужный код не попадает в bundle.

Паттерны Composables

▸useCounter

1import { ref } from 'vue';
2
3export function useCounter(initialValue = 0) {
4  const count = ref(initialValue);
5
6  const increment = () => count.value++;
7  const decrement = () => count.value--;
8  const reset = () => (count.value = initialValue);
9
10  return { count, increment, decrement, reset };
11}

▸useFetch

1import { ref, watchEffect } from 'vue';
2
3export function useFetch(url) {
4  const data = ref(null);
5  const loading = ref(true);
6  const error = ref(null);
7
8  watchEffect(async () => {
9    try {
10      loading.value = true;
11      const response = await fetch(url);
12      data.value = await response.json();
13    } catch (err) {
14      error.value = err;
15    } finally {
16      loading.value = false;
17    }
18  });
19
20  return { data, loading, error };
21}

▸useLocalStorage

1import { ref, watch } from 'vue';
2
3export function useLocalStorage(key, initialValue) {
4  const stored = ref(
5    JSON.parse(localStorage.getItem(key)) || initialValue
6  );
7
8  watch(stored, (newValue) => {
9    localStorage.setItem(key, JSON.stringify(newValue));
10  }, { deep: true });
11
12  return stored;
13}

Миграция с Mixins

▸Пошаговая миграция

Создайте composable из логики mixin

Замените mixin на import composable

Обновите компонент для использования composable

Удалите mixin

▸Параллельная работа

Вы можете использовать mixins и composables одновременно, что позволяет мигрировать постепенно.

Когда использовать Mixins

Существующий проект на Vue 2

Простая логика без конфликтов

Быстрый прототип

Когда использовать Composables

Новый проект на Vue 3

Сложная логика с множеством зависимостей

TypeScript критически важен

Нужна явная документация зависимостей

Заключение

#vue#mixins#composables#reuse#architecture

🛠

Попробуйте наш инструмент

Закрепите знания с помощью интерактивных упражнений

Перейти →

Mixins в Vue

▸Определение

▸Создание mixin

▸Использование

Проблемы Mixins

▸Конфликты имён

▸Неочевидные зависимости

▸Трудности с отладкой

▸TypeScript

Composables в Vue 3

▸Определение

▸Создание composable

▸Использование

Преимущества Composables

▸Явные зависимости

▸Отсутствие конфликтов

▸TypeScript

▸Tree-shaking

Паттерны Composables

▸useCounter

▸useFetch

▸useLocalStorage

Миграция с Mixins

▸Пошаговая миграция

▸Параллельная работа

Когда использовать Mixins

Когда использовать Composables

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня

Mixins в Vue

▸Определение

▸Создание mixin

▸Использование

Проблемы Mixins

▸Конфликты имён

▸Неочевидные зависимости

▸Трудности с отладкой

▸TypeScript

Composables в Vue 3

▸Определение

▸Создание composable

▸Использование

Преимущества Composables

▸Явные зависимости

▸Отсутствие конфликтов

▸TypeScript

▸Tree-shaking

Паттерны Composables

▸useCounter

▸useFetch

▸useLocalStorage

Миграция с Mixins

▸Пошаговая миграция

▸Параллельная работа

Когда использовать Mixins

Когда использовать Composables

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня