## 一：差异
**1.api**
在 **Vue2.X** 我们使用的是 **OptionAPI** 里面有我们熟悉的 `data`、`computed`、`methods`、`watch`...
在 `Vue3` 中，我们依旧可以使用 **OptionAPI**当然不建议 和 `Vue3` 混用
在 `Vue2` 中，我们实现一个功能得分到不同的地方，把数据放在 `data` ,`computed` 方法放在 `methods` 里面，分开的太散乱了，几个功能还好，几十个上百个，那就有点...
所以 `Vue3` 提出了 **Composition API** ，它可以把 `一个逻辑的代码都收集在一起` 单独写个`hook`,然后再引入，这样就不到处分布，显得很乱了
**2.根标签**
在vue2中，组件需要一个根标签去包裹，vue3则不需要了
**3.实例**
* 应用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。
```
//main.js
//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import {createApp} from 'vue
import App from './App.vue
//创建应用实例对象-app(类似于之前vue2中的vm实例，但是app比vm更轻)
createApp(APP).mount('#app')
//卸载就是unmount,卸载就没了
//createApp(APP).unmount('#app')
//之前我们是这么写的，在vue3里面这一块就不支持了，会报错的，引入不到 import vue from 'vue';
new Vue({
render:(h) => h(App)
}).$mount('#app')
//多个应用实例
const app1 = createApp({
/* ... */
})
app1.mount('#container-1')
const app2 = createApp({
/* ... */
})
app2.mount('#container-2')
```
**4.创建组件**
vue2是直接把vue选项对象暴漏出去，vue3通过dafineComplate传入组件，生成一个vue实例
```
<script lang="ts">
import { defineComponent} from 'vue'
export default defineComponent({
name: 'App',
setup() {
return {
// 这里的属性 和 方法 会合并到 data 函数 和 methods 对象里
}
},
})
</script>
```
**5.获取响应式数据**
vue3中的setup里面数据需要用ref修饰改为响应式数据才能跟外面数据同时变化，这时候定义的变量成为一个对象，要改变值需要用`.value`去获取
**6.this指向**
vue3中的setup函数中this为undefined
# 二：vue3的优势及特点
2020年9月18日，vue3发布3.0版本
**特点：**
无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面
**优点：**
1.性能比Vue2快1.2~2倍；
2.Vue3 按需编译，体积比Vue2更小
3.支持组合[API](https://so.csdn.net/so/search?q=API&spm=1001.2101.3001.7020)，类似React Hooks
4.更好的支持TS
5.暴露了自定义渲染的API
6.提供了更先进的组件
**体现：**
* 打包大小减少40%
* 初次渲染快55%，更新渲染快133%
* 内存减少54%
