Какой из них мы должны использовать? Пошаговое сравнение.
Vue.js 3 поставляется в комплекте с Composition API, который можно использовать вместо Options API.
Предыдущая версия Vue.js использовала API параметров для структурирования и разработки приложений Vue.js.
У Options API были некоторые ограничения, и введение Composition API было попыткой исправить эти ограничения.
В этой статье мы проведем пошаговое сравнение между API опций и API композиции, а также рассмотрим различные способы их использования.
Чтобы лучше понять и провести окончательное сравнение между ними, мы собираемся создать простое приложение с обоими и сравнить структуру приложения.
Options API
Мы собираемся создать приложение с простым именем. Это приложение примет ввод, где мы дадим ему имя, которое затем отобразит на странице. Это так просто.
Пример кода:
<template>
<img alt=”Vue logo” src=”./assets/logo.png” />
<div>
<h2>MY NAME</h2>
<p>{{ state.age }}</p>
<input v-model=”state.name” type=”text “ placeholder=”enter name to add” />
<button @click=”addName”>add name</button>
<ul v-for=”(name, i) in state.names” :key=”i”>
<li>{{ name }}</li>
</ul></div></template>
<script>
export default {
name: “App”,
data() {
return {
state: {
name: “John Philip”,
age: 23,
names: [],
},};},
methods: {
addName() {
this.state.names.push(this.state.name);
this.state.name = “”;
},},};
</script>
Мы сгруппировали все структуры приложения так, как они должны быть при работе с Options API.
Из фрагмента кода выше у нас есть данные нашего приложения, которые содержат состояние нашего приложения. У нас также есть метод addName, который будет обновлять наше состояние в соответствии с информацией, введенной пользователем.
К компоненту шаблона мы прикрепили необходимую директиву и синхронизировали ее с пользовательским интерфейсом, так что мы получаем обновленную версию состояния каждый раз, когда состояние изменяется.
Composition API
Предположим, мы должны были создать такое же приложение, но на этот раз с использованием Composition API. У нас будет структура нашего приложения, подобная приведенной ниже.
Пример кода
<template> <div> <h2>MY NAME</h2> <input v-model=”state.name” type=”text “ placeholder=”enter name to add” /> <button @click=”addName”>add name</button> <ul v-for=”(name, i) in state.names” :key=”i”> <li>{{ name }}</li> </ul> </div> </template> <script> import { reactive } from “vue”; export default { name: “App”, setup() { const state = reactive({ name: “John Philip”, age: 23, names: [], }); function addName() { state.names.push(state.name); state.name = “”; } return { state, addName }; },}; </script>
Если вы проверите, то увидите, что мы ввели реактивную систему из Vue. Reactive отвечает за двустороннюю привязку данных. Это обеспечивает синхронизацию между пользовательским интерфейсом компонентов и состоянием. Мы можем использовать refs или reactive, в зависимости от того, что соответствует вашим требованиям к разработке.
Небольшое сравнение
Если мы сравним структуры приложений обоих, мы определенно заметим, что Composition API предоставляет более простой, чистый и читаемый код для структуры приложения. В API параметров есть такие вещи, как перехватчики жизненного цикла, которые могут сделать код менее читаемым.
Несмотря на то, что оба они все еще могут использоваться для разработки приложений, для более сложных приложений, требующих большого количества функций и организации, Composition API - лучший вариант.
Composition API также обеспечивает простое повторное использование кода по сравнению с API опций.
Тем не менее, какой из двух вариантов вам удобнее и проще в использовании? Я все еще пытался использовать оба, в зависимости от того, над каким приложением я работаю.
Заключительные мысли
Спасибо, что дочитали эту статью до сих пор. Надеюсь, вы сочли это полезным. Не стесняйтесь поделиться этой статьей с другими.
Дополнительная литература:
Больше контента на plainenglish.io
