详细教程：在Vue2和Vue3中构建相同的组件

全文共5529字，预计学习时长16分钟

来源：Pexels

 

过去，我们看过很多重大变革即将到来的文章，但是并没有真正深入研究代码将如何变化。

 

为了展示这些变化，小芯将在Vue2和Vue3中构建一个简单的表单组件。

 

在本文的最后，将介绍Vue2和Vue3之间的主要编程差异，帮助大家了解，逐渐成为更好的开发人员。

 

如果想知道如何建立第一个Vue3应用程序，请查看初学者的Vue3Alpha应用程序指南。

 

我们开始吧！

 

创建模板

 

对于大多数组件，Vue2和Vue3中的代码即使不完全相同，也是非常相似的。但是，Vue3支持片段，这意味着组件可以有多个根节点。

 

这在呈现列表中的组件以删除不必要的包装器div元素时特别有用。但是，在本例中，表单组件的两个版本都将只保留一个根节点。

 

<template>
  <div>
    <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>

唯一真正的区别是如何访问数据。在Vue3中，响应式数据都封装在一个响应状态变量中，所以需要访问这个状态变量来获得值。

 

<template>
  <div>
    <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>

设置数据