Первый взгляд на Vue 3.0 — Composition API

Vue.js
Первый взгляд на Vue 3.0 — Composition API

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

Что такое API композиции?

Composition API: набор малонавязчивых функциональных API, которые позволяют нам более гибко «составлять» логику компонентов.

Давайте рассмотрим простой пример

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
  import { reactive, computed } from 'vue'

  export default {
    setup() {
      const state = reactive({
        count: 0,
        double: computed(() => state.count * 2),
      })

      function increment() {
        state.count++
      }

      return {
        state,
        increment,
      }
    },
  }
</script>

Давайте сначала посмотрим, что происходит в этом коде?

import { reactive, computed } from 'vue'

API компонентов предоставляет свойства компонентов в виде функций, поэтому первым шагом является импорт необходимых функций. В нашем примере мы используемreactiveСоздайте свойство ответа сcomputedСоздайте вычисляемые свойства.

export default {
  setup() {
    // ...
    return {
      state,
      increment,
    }
  }

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

Зачем внедрять Composition API

В Vue2 мы используем API параметров для написания этого примера.

<template>
  <button @click="increment">
    Count is: {{ count }}, double is: {{ double }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },

  computed: {
    double() {
      return this.count * 2;
    }
  },

  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

Затем в Vue2, если мы хотим повторно использовать эту логику, мы можем передавать такие вещи, какmixins, компоненты более высокого порядка или компоненты без рендеринга (реализованные через слоты с заданной областью действия).

Сначала мы смотрим на пути микс

import CounterMixin from './mixins/counter'

export default {
  mixins: [CounterMixin]
}

mixinsПроблема в

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

  • Конфликт пространства имен. Свойства и методы могут конфликтовать между миксинами.

Итак, давайте посмотрим, как работают слоты с ограниченной областью действия:

<template>
  <Counter v-slot="{ count, increment }">
     {{ count }}
    <button @click="increment">Increment</button> 
  </Counter> 
</template>

С помощью слотов с областью действия мы точно знаем, к каким свойствам мы можем получить доступ через свойство v-slot, что облегчает понимание кода. Недостатком этого подхода является то, что мы можем получить к нему доступ только в шаблоне, и его можно использовать только в области действия компонента Counter.

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

хорошо, пришло время для Composition API

function useCounter() {
  const state = reactive({
    count: 0,
    double: computed(() => state.count * 2),
  });
  function increment () { count.value++ }

  return {
    state,
    incrememt
  }
}

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

Элегантнее, не так ли? Сравнение:

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

В дополнение к облегчению логического извлечения и повторного использования Composition API на самом деле представляет собой новый способ мышления о кодировании.

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

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

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

Существует проблема

Конечно, введение Composition API имеет и определенные недостатки.

Компонуемый API предлагает большую гибкость в организации кода, но также требует от разработчика большей сдержанности, чтобы «сделать все правильно», а компонуемый API оставит неопытных людей, которые будут писать спагетти-код.

Опции API фактически сформированы в принудительном конвенции:

  • Задайте параметры получения в реквизитах
  • Установить переменные в данных
  • Установите вычисляемые свойства в вычисляемом
  • Установите свойство прослушивания в часах
  • методы задают методы события внутри

Вы обнаружите, что API параметров согласовывает, где мы должны что-то делать, что также в определенной степени заставляет нас разделять код. Теперь при использовании Composition API это уже не такая условность.Поэтому организация кода очень гибкая.Если вы новичок или фермер код, который не думает глубоко, то количество кода настройки будет увеличиваться по мере того, как логика становится все более и более сложной. , отдача в той же настройке становится все более сложной, и она неизбежно будет попадать в посредничество "кода лапши".

что мы ожидаемsetup()Функция теперь просто действует как точка входа для вызова всех составных функций.

export default {
  setup() {
    // 网络状态
    const { networkState } = useNetworkState()

    // 文件夹状态
    const { folders, currentFolderData } = useCurrentFolderData(networkState)
    const folderNavigation = useFolderNavigation({
      networkState,
      currentFolderData,
    })
    const { favoriteFolders, toggleFavorite } = useFavoriteFolders(
      currentFolderData
    )
    const { showHiddenFolders } = useHiddenFolders()
    const createFolder = useCreateFolder(folderNavigation.openFolder)

    // 当前工作目录
    resetCwdOnLeave()
    const { updateOnCwdChanged } = useCwdUtils()

    // 实用工具
    const { slicePath } = usePathUtils()

    return {
      networkState,
      folders,
      currentFolderData,
      folderNavigation,
      favoriteFolders,
      toggleFavorite,
      showHiddenFolders,
      createFolder,
      updateOnCwdChanged,
      slicePath,
    }
  },
}

Конечно, для них у чиновника тоже есть определенная стратегия принятия: Composition API в Vue 3.0 не является решением по умолчанию, а используется Options API из Vue 2.X.Composition API будет считаться расширенной функцией, потому что проблемы, которые он призван решать, в основном связаны с большими приложениями..

Использованная литература:

Добро пожаловать в публичный аккаунт WeChat

Категории