当Vue2遇到Composition API，它们之间到底能擦出怎样的火花？

左手的ㄟ右手 2021-09-08 23:24 122阅读 0赞

## 前言 ##

`Composition API`是什么？也称为组合式 API。如果你第一次听到这个词，请认真读完这篇文章。

官网有这样一段解释：

> 通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。仅此一项就可以使我们的应用在可维护性和灵活性方面走得相当远。然而，我们的经验已经证明，光靠这一点可能并不够，尤其是当你的应用变得非常大的时候——想想几百个组件。处理这样的大型应用时，共享和重用代码变得尤为重要。

我们之前创建组件更多地是使用`OptionAPI`(data、computed、methods、watch) ，但是，当我们的组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。

> 如果能够将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 使我们能够做到的。

提到组合式API，我们可能更多地想到在Vue3中使用。但是目前国内大部分Vue项目都还是Vue2项目，如果迁移到Vue3，可能还需要花费一定的精力。你在此处可能会有一个疑问：Vue2项目可以迁移到Vue3吗？答案是可以的。如果你想知道怎么操作，可以点击下方链接:

https://github.com/vuejs/vue-next/tree/master/packages/vue-compat

但是，迁移之前需要你主要几点问题，官方这样解释：

> 虽然我们努力使迁移构建尽可能模仿 Vue 2 的行为，但仍有一些限制可能会阻止您的应用程序有资格升级：
> 
>  *  依赖 Vue 2 内部 API 或未记录行为的依赖项。最常见的情况是在 上使用私有属性VNodes。如果您的项目依赖于Vuetify、Quasar或ElementUI等组件库，最好等待它们的 Vue 3 兼容版本。
>  *  Internet Explorer 11 支持：Vue 3 已正式放弃支持 IE11 的计划。如果您仍然需要支持 IE11 或更低版本，则必须继续使用 Vue 2。
>  *  服务器端渲染：迁移构建可用于 SSR，但迁移自定义 SSR 设置要复杂得多。总的想法是替换vue-server-renderer用@vue/server-renderer。Vue 3 不再提供捆绑渲染器，建议将 Vue 3 SSR 与Vite一起使用。如果您正在使用Nuxt.js，那么等待 Nuxt 3 可能会更好。

可以看到，从Vue2迁移到Vue3肯定需要一定的成本，那么有什么办法让我在Vue2也可以用到`Composition API`。其实，现在已经出了解决方案。你可以上网搜下这样一个库`@vue/composition-api`，这个库是专门为Vue使用`Composition-api`而生，目前是发布候选版。

## 安装与使用 ##

#### NPM ####

npm install @vue/composition-api
    # or
    yarn add @vue/composition-api

#### SFC ####

必须通过`vue.use()`将`@vue/composition-api`作为插件安装，然后才能使用`composition-api`编写组件。所以，请这样。一般在你的项目文件夹中的`main.js`编辑如下：

import Vue from 'vue'
    import VueCompositionAPI from '@vue/composition-api'
    
    Vue.use(VueCompositionAPI)

然后，在组件中这样使用。

import { reactive, toRefs} from '@vue/composition-api'
    export default { 
      name: 'HelloWorld',
      props: { 
        msg: String
      },
      setup(props){ 
        const obj = reactive({ 
          name:'maomin',
          age:18
        });
        console.log(props.msg);
    
        return { 
          ...toRefs(obj)
        }
      }
    }

当你迁移到Vue 3时，只要将`@vue/compositionapi`替换为`vue`，你的代码就可以正常工作了。

另外，你需要注意的是，如果你在使用TypeScript，为了正确推断Vue组件选项中的类型，需要使用`defineComponent`定义组件。

import {  defineComponent } from '@vue/composition-api'
    
    export default defineComponent({ 
      // type inference enabled
    })

### CDN ###

如果你想使用CDN，同样也有办法。在vue之后包含@vue/compositionapi，它将自动安装自己。

这时，`@vue/composition-api`将暴露于全局变量`window.VueCompositionAPI`。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <p>{
       {num}}</p>
            <div>{
       {obj.page}}</div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
        <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-rc.13"></script>
        <script> const { ref, reactive } = VueCompositionAPI new Vue({ el: '#app', setup() { const num = ref(0); const obj = reactive({ page: 1, pageSize: 10 }) return { num, obj } } }) </script>
    </body>
    
    </html>

## 结语 ##

`@vue/composition-api`支持所有现代浏览器和IE11+。你可以在Vue2项目使用它，然后在合适的时机无缝衔接到Vue3项目。

下面是`@vue/composition-api`github网址：

https://github.com/vuejs/composition-api

另外，关于`CompositionApi`的用法还有很多，可以查看下方的官方文档：

https://v3.cn.vuejs.org/guide/composition-api-introduction.html

## 关于作者 ##

作者：**Vam的金豆之路**。曾获得2019年CSDN年度博客之星，CSDN博客访问量已达到数百万。掘金博客文章多次推送到首页，总访问量已达到数十万。

另外，我的公众号：`前端历劫之路`，公众号持续更新最新前端技术及相关技术文章。欢迎关注我的公众号，让我们一起在前端道路上历劫吧！Go！