vue2和vue3的区别

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

Vue2 表格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><inputtype='text'v-model='state.username'placeholder='Username'/><inputtype='password'v-model='state.password'placeholder='Password'/><button @click='login'>Submit</button><p> Values: {{ state.username + ' ' + state.password }}</p></div>
</template>

这里就是Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）
Vue2 - 这里把两个数据放入data属性中

export default {props: {title: String},data () {return {username: '',password: ''}}
}

在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

为了可以让开发者对反应型数据有更多的控制，我们可以直接使用到 Vue3 的反应API（reactivity API）。

使用以下三步来建立反应性数据:

1从vue引入reactive
2使用reactive()方法来声名我们的数据为反应性数据
3使用setup()方法来返回我们的反应性数据，从而我们的template可以获取这些反应性数据

import { reactive } from 'vue'export default {props: {title: String},setup () {const state = reactive({username: '',password: ''})return { state }}
}

这里构造的反应性数据就可以被template使用，可以通过state.username和state.password获得数据的值。