标签：功能 const Composition API Vue2 login Options

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。

标签：功能,const,Composition,API,Vue2,login,Options
来源： https://blog.51cto.com/15057855/2636271

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。