С выходом Vue 3 это прекрасное время для создания приложения с новым Vue 3 Composition API. Хотя это изменение в том, как вы можете создавать компоненты, является одной из самых больших функций Vue 3, вот некоторые другие ключевые преимущества этой версии:
- Меньше и быстрее.
- Улучшена поддержка TypeScript.
- Выставляет низкоуровневые API.
- Приложения будут более удобными в обслуживании.
Вернемся к Composition API, создав простое приложение TODO. Посмотрите на блоки ниже для разницы высокого уровня между компонентом, написанным с помощью Composition API, и более старым Options API. Мы углубимся в дополнительные детали при создании приложения.
Параметры API с Vue 2
JavaScript
xxxxxxxxxx
1
let app = new Vue({
2
data:{ /* Application data */ },
3
computed:{ /* computed properties */ },
4
methods:{ /* functions and methods */ },
5
})
API композиции с Vue 3
JavaScript
xxxxxxxxxx
1
let app = new Vue({
2
beforeCreate(){},
3
setup(){},
4
created(){}
5
})
Начало работы: настройка среды разработки
В этом руководстве мы будем использовать Eclipse IDE с установленным плагином CodeMix, хотя представленные концепции можно использовать в любой IDE:
- Загрузите Eclipse IDE и установите CodeMix с торговой площадки Eclipse или через Genuitec.com .
- В качестве альтернативы, для автономного установщика используйте Angular IDE — да, он также полностью поддерживает Vue!
- Если пакет Vue еще не установлен, установите его с помощью браузера расширений CodeMix ( Справка> Расширения CodeMix ).
Вы можете также , как:
Создание защищенного приложение с пружинным бутсом и Vue.js .
Если вы ищете IDE для разработки с такими фреймворками, как Angular, React и Vue.js или такими языками, как Python и Rust, CodeMix поможет вам. Для Vue установите пакет Vue или знаменитое расширение Vetur для поддержки Vue. Codemix совместим со всеми IDE и инструментами на основе Eclipse, такими как MyEclipse , Spring Tools Suite и JBoss Tools.
Создание проекта Vue с использованием CodeMix
Теперь мы можем создать наше приложение с помощью мастера проектов CodeMix. Чтобы создать новый проект Vue, выберите « Файл»> «Создать»> «Проект»> «CodeMix»> «Проект Vue» . Убедитесь, что вы выбрали параметр «Приложение, созданное в Vue CLI» в мастере, прежде чем нажимать «Готово».
Vue CLI создает приложение Vue 2. Добавив composition-apiмодуль в проект, мы можем использовать API композиции в нашем приложении Vue 2 (это не сделает его приложением Vue 3). Пожалуйста, выполните следующую команду в терминале:
npm install @vue/composition-api
Затем измените файл main.js, как показано ниже:
JavaScript
xxxxxxxxxx
1
import Vue from 'vue'
2
import App from './App.vue'
3
import VueCompositionApi from '@vue/composition-api';
4
Vue.use(VueCompositionApi);
6
Vue.config.productionTip = false
7
new Vue({
8
render: h => h(App),
9
}).$mount('#app')
Хорошая идея - использовать Bootstrap, чтобы добавить стили и иконки в наше приложение. Для этого нам нужно добавить следующие строки кода в наш основной HTML-файл в <head> разделе:
HTML
xxxxxxxxxx
1
<link rel="stylesheet" href="https://bootswatch.com/4/lux/bootstrap.min.css">
2
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Итак, откройте index.htmlфайл в srcпапке и обновите его, как показано ниже:
Джава
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8
<title>Composition-Todo</title>
9
<link rel="stylesheet" href="https://bootswatch.com/4/lux/bootstrap.min.css">
10
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
11
</head>
12
<body>
13
<noscript>
14
<strong>We
Теперь мы подошли к основной функции - использованию API композиции для создания нашего приложения. Основным преимуществом этого API является повышенная удобство сопровождения вашего кода за счет объединения логических задач, а не разделения их по параметрам компонентов, таким как данные, реквизиты, методы и т. Д.
Хотя преимущества не очевидны сразу в нашем простом приложении TODO, представьте себе более сложное приложение, где логика для различных возможностей обычно распределяется по файлу - чем больше усложняется ваше приложение, тем труднее становится его читать и поддерживать.
Для сравнения мы показали, как этот компонент будет реализован с помощью API параметров и API композиции. Пожалуйста, скопируйте версию композиции в <script> раздел вашего app.vue файла.
Параметры API
HTML
xxxxxxxxxx
1
<script>
2
export default {
3
data(){
4
return {
5
todo: "",
6
todos: []
7
};
8
},
9
methods:{
10
addTodo(){
11
if (this.todo!='') {
12
this.todos.push(this.todo);
13
this.todo ='';
14
}
15
},
16
removeTodo(i){
17
this.todos.splice(i,1)
18
},
19
}
20
}
21
</script>
API композиции
JavaScript
xxxxxxxxxx
1
import { reactive } from "@vue/composition-api";
2
export default {
3
setup(){
4
const {state, addNewTodo, removeTodo} = useTodo();
5
return {
6
state,
7
addNewTodo,
8
removeTodo
9
};
10
}
11
}
12
function useTodo(){
13
let state = reactive({
14
todo: "",
15
todos: []
16
});
17
function addNewTodo(){
18
state.todos.push(state.todo);
19
state.todo = '';
20
}
21
function removeTodo(i){
22
if (state.todo!='') {
23
state.todos.push(state.todo);
24
state.todo ='';
25
}
26
}
27
return{
28
state,
29
addNewTodo,
30
removeTodo
31
};
32
}
API композиции управляет реактивностью не так, как API параметров. Существует два способа работы с состоянием и реактивностью в новом Composition API: Refs и Reactive. С помощью Reactive мы сообщаем Vue о том, какие свойства объекта следует отслеживать и, следовательно, отображать при необходимости. Вместо этого Ref дает свойство value любому объекту, и всякий раз, когда мы присваиваем ему новое значение, Vue обновляет шаблон новым значением.
В основе API композиции лежит функция настройки, которая представляет собой функцию, которая возвращает свойства и функции в шаблон. Важно отметить, что любые данные, которые используют ссылки или реактивные, должны быть возвращены как объекты из функции настройки.
Теперь перейдем к моделированию; вставьте следующий CSS-код в <style>раздел файла Vue:
CSS
xxxxxxxxxx
1
#app {
2
font-family: 'Avenir', Helvetica, Arial, sans-serif;
3
font-smoothing: antialiased;
4
osx-font-smoothing: grayscale;
5
text-align: center;
6
color: #2c3e50;
7
margin-top: 60px;
}
.fa {
color:red;
margin-left: 20px;
/* height: 40px; */
}
.fa:hover{
color: black;
/* height: 50px; */
}
Then, add the following code in the template section:
xxxxxxxxxx
<template>
<div id="app">
<section class = "container">
<div class="card">
<div class="card-header"> <h3> Add New Todo</h3></div>
<div class="card-body">
<input type="text" class = "form-control" v-model ="state.todo"/>
<button class="btn btn-primary my-2" @click="addNewTodo"> Add Todo</button>
</div>
</div>
<div class="container my-5">
<div class="card">
<div class="card-header"> <h3> MyTodos</h3></div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item" v-for="(todo, i) in state.todos" :key="i">
{{todo}} <i class="fa fa-trash" aria-hidden="true" @click="removeTodo(i)"></i>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</template>
When pressing the green play button located on the top right of our editor, CodeMix automatically launches the server and opens the Live Preview Pane. In it, we can observe our application running without the need of an external browser, as shown on the gif below:
In Closing
While the Composition API is a much better way of working with components, it is important to note that this API is an alternative to the current Options API and not a replacement. We can still work with components using options, mixins, and scoped slots, as is the norm in Vue 2. The Vue core team has stated that the Options API would still continue to be supported in Vue 3.
You can download the source code for this app from our GitHub repository.