2-vue3 composition-api

252 阅读1分钟

项目地址 gitee.com/fe521/vue3-…

Composition API 介绍

什么是 Composition API

先了解 options API,缺点大组件比较鸡肋,不好阅读维护

export default {
    data() {},
    computed: {},
    methods: {}
};

Composition API 就是解决这个问题的

代码是根据逻辑功能组织的
    1. 可以按照功能相同的代码放在一起
    2. 可以把代码抽离到一个文件中

Composition API 也可以叫做基于函数组合的 API

为何要使用 Composition API

  1. Composition API 是根据逻辑相关性组织代码的,提供可读性和可维护性

  2. 基于函数组合的逻辑,更好的重用逻辑代码

  3. 在之前的 optionsAPI 中想要重用某个逻辑代码,可以使用考虑 mixins,

    但是如果 mixins 有同名的属性就会有命名冲突,并且代码不可见 关系不清晰,属性来源不明白

  4. Vue3 中 Composition API 是可选的

如何使用 Composition API

Composition API
    Setup
    响应式引用
    方法
    计算属性
    Watch
    生命周期
    ...