今天是第二十天，我想簡單分享一下 Option API 與 Composition API 的差別

我們昨天談到響應式APIs有提及一點點Composition API(組合式API)，這個是Vue3所加入的。
而這次也可以Vue2 Option API拉進來看看有甚麼不同

Vue2 Option API

可以先看看這段程式

<script>
    export default{
    name:"vue",
    data(){
    
    },
    methods:{
    
    },
    computed:{

    }
};
</script>

在元件中，我們將資料放在data()，功能邏輯放在methods，資料跟功能邏輯放在相對應的區塊，似乎有進行所謂的分類，但是因為OptionAPI的編寫方式，隨著程式碼或是專案的複雜度日益提高，後續的修改或維護的難度會逐漸增加，造成資料、邏輯分散在不同區塊，萬一想要對程式碼中的功能進行維護，就得在許多區塊一一翻找。

Vue3 Composition API

而Composition API他改善了

• 程式能依功能分類使用
• 封裝功能可以跨元件使用，複用性增加
• 提供更好的TypeScript支持

Composition API不再需要將資料分法拆到各個地方，可以將data,methods區塊等內容都寫在Setup中，可以用功能來進行區塊的分類。也可以將function寫在Setup外面，再放回Setup組裝。

<script>
    export default {
      setup() {
        
        return { 
            
        };
      },
    };
  </script>
  
  <template></template>

參考文件:

https://chupai.github.io/posts/2104/compositionapi/

https://pinkymini.pixnet.net/blog/post/35630359-%E3%80%90%E5%89%8D%E7%AB%AF%E6%96%B0%E6%89%8B%E6%97%A5%E8%A8%98%E3%80%91vue.js%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98%286%29-vue2%E7%9A%84option-

Option API 與 Composition API 的差別就分享到這邊，我們第二十一天見