Доброе утро, друзья мои. В этой статье мы собираемся представить различия между Vue 2.x и Vue 3.x, чтобы те, кто уже знаком с Vue.js 2.x, могли быстро понять различия и взаимосвязи между двумя версиями. .
Здесь я разработаю простой табличный компонент, используя Vue 2 и Vue 3, чтобы продемонстрировать различия в разработке компонентов в этих двух версиях. К концу этой статьи вы получите представление о различиях в разработке компонентов между Vue 2 и Vue 3 и будете готовы к использованию Vue 3.
Создание шаблона с помощью VueJs
Что касается компонентов, большая часть кода в Vue 2 и Vue 3 очень похожа. В Vue 3 представлены фрагменты, что означает, что компоненты могут иметь несколько корневых узлов. Эта новая функция может уменьшить необходимость в ненужных обертках div между компонентами.
При разработке Vue 2 вы, возможно, заметили, что каждый компонент часто оборачивается элементом div, в результате чего образуется множество слоев ненужных элементов div. Фрагменты решают эту проблему.
Хотя мы не будем приводить здесь пример, давайте остановимся на простых компонентах с одним корневым узлом.
Шаблон таблицы Vue 2
<template>
<div class='form-element'>
<h2> {{ title }} </h2>
<input type='text' v-model='username' placeholder=’Username’ />
<input type=’password’ v-model=’password’ placeholder=’Password’ />
<button @click=’login’>
Submit
</button>
<p>
Values: {{ username + ' ' + password }}
</p>
</div>
</template>
Единственное реальное отличие Vue 3 — это получение данных. В Vue 3 reactive Data содержится в переменной реактивного состояния, поэтому нам нужно получить доступ к этому реактивному состоянию, чтобы получить значения данных.
Шаблон таблицы Vue 3
<template>
<div class=’form-element’>
<h2> {{ state.title }} </h2>
<input type=’text’ v-model=’state.username’ placeholder=’Username’ />
<input
type=’password’
v-model=’state.password’
placeholder=’Password’
/>
<button @click=’login’>
Submit
</button>
<p>
Values: {{ state.username + ‘ ‘ + state.password }}
</p>
</div>
</template>
