## 一：差異
**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%
