vue2和vue3的区别

创建一个 template

组件来说，大多代码在Vue2和Vue3都非常相似。Vue3支持碎片(Fragments)，就是说在组件可以拥有多个根节点。

这种新特性可以减少很多组件之间的div包裹元素。在开发vue的时候，我们会发现每一个组件都会有个div元素包裹着。就会出现很多层多余的div元素。碎片(Fragments) 解决了这个问题。对于有完美强迫症的童鞋“真的时太棒了”。我们这里的例子里就不展示了，用简单的单根节点的组件。

Vue2 表格template

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

在Vue3的唯一真正的不同在于数据获取。Vue3中的 反应数据（Reactive Data） 是包含在一个 反应状态（Reactive State） 变量中。— 所以我们需要访问这个反应状态来获取数据值。

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

建立数据 data

这里就是Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API） 对比Vue3 合成型API（Composition API）

旧的选项型API在代码里分割了不同的属性（properties）：data，computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

现在我们来对比一下Vue2