Hi Dai Gei Ho~ 我是Winnie～

進入Vue章節前的 溫腥提醒：
在之後的文章中，預計不會針對 Vue 的基本使用做深入的講解(如:v-model、v-html 等)，所以 對Vue 較不熟悉的捧油，建議可以先補充下 Vue 基本入門，會比理解之後的範例。

好的～溫腥提醒說完了，那我們要開始來說說 Vue 3 了。

Vue 3

Vue3 正式版於 2020/09/18釋出，掐指一算 差不多也滿一年了，而這次的改版 ，其底層核心改使用TypeScript來撰寫，同時也針對過去的遇到的問題 改善了以下幾點：

• 讓編譯後的檔案容量更小，效能變更快
• 程式碼的重複使用性與閱讀性更高
• 加強對 TypeScript的支援

同時還增加了幾點 新特性：

1. 引入Fragment，不限制component 只能是單一節點
2. 狀態的響應偵測從 Object.defineProperty 改為Proxy API，主要可以讓執行效能更好，同時也解決過去物件、陣列沒有辦法深度偵測的問題
3. 新增setup、ref用法，更有效進行開發

實體物件

而除了以上增加新特性之外，在創建Vue實體物件的用法也有著改變，不知道大家記不記得，一開始使用Vue時需創建一個實體物件，過去我們是使用 new Vue({})方式來創建，接著再透過$mount來掛載至網頁的某個節點。如果有印象，這個就是 屬於 Vue2.x的用法

用法範例如下：

//Vue2.x
const vm = new Vue({
 data:{
  count:1
 }
})

vm.$mount('#app');

而在 Vue3 之後，實體物件的創建也就改成了以下createAPP({})的用法：

//vue3
const vm = createApp({
 data(){
   return{
     count:1
   }
 }
})

vm.mount('#app'); //

ps.這邊需注意，在掛載至跟節點時，Vue3的mount 是不需＄符號的

Composition API

接著，在 Vue3 眾多特點之中，其中最大特別之處就非 Composition API莫屬了。

Composition API 為 Vue 元件的另一種編寫方式，而其出現的目的主要是解決 Vue2 Option API 會造成component 與 component 之間 程式碼與 邏輯結構 難以被抽出重複利用的問題，

Option API用法如下：

//option
export default {
  data() {
    return { a: 1 }
  },
  methods(){},
  computed: {
    // get only
    aDouble() {
      return this.a * 2
    }
  },
  props:{}
}

所以 Composition API 所能提供的最大功用 就是能將 程式能依功能分類來使用，可增加閱讀性之外 同時還可以 跨元件使用來增加複用性

Composition API用法如下：

//Composition api

export default {
 name:'APP',
 props:[],
 setup(props,context){
    
 }
}

恩～相信看到這邊，你對於Option API 與 Composition API 的差別應該還是很模糊，但別擔心 在明天文章中我們 將會(江蕙？) 針對Option API 程式範例 來深入點 來探討 所Option API哪裡出問題，大家應該就能在理解一點了

以上就是今天文章內容，針對 Vue3 新增特點的介紹，如有問題，再請各位客官多多指教了 謝謝。