对比Vue2中Options API 和 Vue3中Composition API

1 Options API

Options API 可以翻译为选项API，字面意思可供使用者挑拣的分类条目，就是框架定义好选项，我们可以把我们的功能写在选项里，如props 里面设置接收参数、data 里面设置变量、computed 里面设置计算属性、watch 里面设置监听属性、methods 里面设置事件方法你会发现 Options APi 都约定了我们该在哪个位置做什么事。

   

    

     

      

     
     

      

       export default {
      
     
    

     

      

     
     

      

         name: 'index',
      
     
    

     

      

     
     

      

         data() {
      
     
    

     

      

     
     

      

           return {}
      
     
    

     

      

     
     

      

         },
      
     
    

     

      

     
     

      

         watch: {},
      
     
    

     

      

     
     

      

         components: {},
      
     
    

     

      

     
     

      

         created() {},
      
     
    

     

      

     
     

      

         methods: {},
      
     
    

     

      

     
     

      

         computed: {}
      
     
    

     

      

     
     

      

       }
      
     
   
  

缺点： 一个功能往往需要在Vue不同的配置项中定义属性和方法，比较分散，如果项目比较小，组件逻辑功能不多，代码结构还能保持清晰明了，但是项目大了后，一个methods中可能包含多个方法甚至几十个方法，你往往分不清哪个方法对应哪个功能，耦合度相对较高。

2 Composition API

Composition API 可以理解为组合API，一个小功能的api都会放到一起，下面一个简单的例子，可能运行会报错，这里只是演示写法。

   

    

     

      

     
     

      

       export default {
      
     
    

     

      

     
     

      

         setup(props, context) {
      
     
    

     

      

     
     

      

           // 用户登录
      
     
    

     

      

     
     

      

           const login = reactive({ login: "1" });
      
     
    

     

      

     
     

      

           // 登录验证
      
     
    

     

      

     
     

      

           const loginonSubmit = e => {
      
     
    

     

      

     
     

      

             e.preventDefault();
      
     
    

     

      

     
     

      

             validate()
      
     
    

     

      

     
     

      

               .then(() => {})
      
     
    

     

      

     
     

      

               .catch(err => {});
      
     
    

     

      

     
     

      

           };
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

           // 用户注册
      
     
    

     

      

     
     

      

           const registered = reactive({ registered: "1" });
      
     
    

     

      

     
     

      

           const registeredonSubmit = e => {
      
     
    

     

      

     
     

      

             e.preventDefault();
      
     
    

     

      

     
     

      

             validate()
      
     
    

     

      

     
     

      

               .then(() => {})
      
     
    

     

      

     
     

      

               .catch(err => {});
      
     
    

     

      

     
     

      

           };
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

           return {
      
     
    

     

      

     
     

      

             login 
      
     
    

     

      

     
     

      

             loginonSubmit ,
      
     
    

     

      

     
     

      

             registered ,
      
     
    

     

      

     
     

      

             registeredonSubmit 
      
     
    

     

      

     
     

      

           };
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

       };
      
     
   
  

   
  
  

Composition API 根据逻辑相关性组织代码，提高可读性和可维护性，这样做，即时项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有API。