Занят всю ночь, используя CompositionAPI, чтобы покорить прибамбасы продакт-девушек

Vue.js
Занят всю ночь, используя CompositionAPI, чтобы покорить прибамбасы продакт-девушек

Днем я читал то, что написал босс нашей группы, Лао Вет.compositionАнимированная презентация статьи.

★ ★ ★ ★ Синхронизация видео на станции B ★ ★ ★ ★ ★

★ ★ ★ ★ Код Адрес ★ ★ ★ ★ ★

Итоги глобальной конференции Vue3.0 по галантерее

Понимание новых возможностей Vue3

Меня ищет продавщица, просто поболтайте.

1. Потребность в наворотах

  • День 1: У продавщицы был каприз, и она попросила меня случайным образом изменить шрифт кнопки.
  • Два часа спустя: Девушка-производитель сказала, что фон кнопки также может случайным образом менять цвет.

  • Две минуты спустя: девушка-производитель снова сказала, могут ли частоты изменения цвета двух кнопок быть разными или их можно комбинировать по желанию.

  • Я спросил его, не хочет ли он изменить цвет в зависимости от корпуса телефона.

  • Девушка-производитель сказала, что она может быть побита вами.

Во-вторых, решение

Это требование выглядит фантастическим, на самом деле единственная основная логика — это случайное изменение цвета.

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

Сложность Трудно обеспечить связность кода при реализации сложных логических комбинаций. Это также явный недостаток Vue2. React очень хорошо решает эту проблему после использования хуков.

1. Неадекватность OptionAPI

1.1 Раздражающие повторяющиеся горизонтальные прыжки

В традиционном API Vue Options, чтобы добавить или изменить требование, вам нужно изменить его в данных, методах и вычислениях соответственно.Полоса прокрутки многократно перемещается вверх и вниз, что я называю «повторяющимся горизонтальным прыжком».

1.2 Мистин и наследование войны

Представьте, если мы хотим реализовать такие навороты во всех наших компонентах, но также учитываем степень связанности кода. Наша первая мысль

  • Mixins
  • Компоненты высшего порядка (также известные как HOC)
  • Компоненты без рендеринга (компоненты, которые инкапсулируют логику на основе слотов с ограниченной областью действия / слотов с ограниченной областью действия).

Но тройка не очень идеальна, главная проблема существует

  • Источник данных шаблона не ясен, например, миксинам трудно определить, откуда берется атрибут, просто взглянув на шаблон.
  • конфликт пространств имен
  • проблемы с производительностью. Например, HOC требует дополнительной вложенности логики компонентов, что приведет к ненужным потерям производительности.

2. CompositionAPI родился

Для решения этой проблемы и существует композиция, при комбинировании код, разбросанный по разным данным и методам, рекомбинируется, а код функции сохраняется вместе, и эти коды можно разделить на функции по отдельности.

3. Реализация кода

  1. Написание изменяющей цвет композитной фабрики API Во-первых, логика изменения цвета инкапсулирована в фабрику составного API, которая также может гарантировать, что параметры используются для управления диапазоном изменения цвета и частотой изменения цвета. Я изменюсь так, как ты хочешь измениться.
function useColor(type, time) {
  const state = reactive({
    color: '#000000'
  })
  onMounted(() => {
    setInterval(() => {
      const r = type === 'r' ? Math.floor(Math.random() * 255).toString(16) : '00'
      const g = type === 'g' ? Math.floor(Math.random() * 255).toString(16) : '00'
      const b = type === 'b' ? Math.floor(Math.random() * 255).toString(16) : '00'
      var color =
          `#${ r + g + b}`
      state.color = color
    }, time)
  })
  return toRefs(state)
}
  1. Соберите компоненты представления по мере необходимости

Нам нужно только вызвать оригинальный API, меняющий цвет, чтобы собрать его в соответствии с потребностями продавщицы продукта, и вы можете делать то, что хотите. Поскольку сами выходные данные по-прежнему реагируют, вы действительно можете реагировать даже после объединения. Так что почти по желанию.

const MyComponent = {
  template: `<button type="button" class="el-button" :style="{ background,color }"><span>按钮</span></button>`,
  setup() {
    const {
      color
    } = useColor('r', 100)
    const {
      color: background
    } = useColor('b', 1000)
    return {
      color,
      background
    }
  }
}
createApp(MyComponent).mount('#app')

4. Резюме

CompositionAPI, на мой взгляд, самая ароматная функция в Vue3, которая позволяет свободно комбинировать нашу логику.

В этой статье используетсяmdniceнабор текста

  • Это проект с открытым исходным кодом нашей командыelement3
  • Библиотека компонентов внешнего интерфейса, поддерживающая vue3.
Категории