This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!

preface

What is the Composition API? Also known as a composite API. If you’re hearing it for the first time, read this article carefully.

The website explains:

By creating Vue components, we can extract the repetitive parts of the interface, along with their functionality, into reusable snippet of code. This alone will take our application a long way in terms of maintainability and flexibility. However, our experience has shown that this alone may not be enough, especially if your application becomes very large — think hundreds of components. Sharing and reusing code becomes especially important when dealing with large applications like this.

We used to create components more with OptionAPI(Data, computed, Methods, Watch), but as our components started to get bigger, the list of logical concerns grew. This can lead to components that are hard to read and understand, especially for those who didn’t write them in the first place.

It would be even better if you could collect code related to the same logical concern. And that’s exactly what composite apis allow us to do.

When it comes to composite apis, we probably think of them more in Vue3. However, most of the domestic Vue projects are still Vue2 projects, and it may take some effort to migrate to Vue3. You may have a question here: Can the Vue2 project be migrated to Vue3? The answer is yes. If you want to know how to do it, you can click on the link below:

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

However, before migrating, you need to ask the following questions:

While we strive to make the migration build mimic the behavior of Vue 2 as much as possible, there are some limitations that may prevent your application from qualifying for an upgrade:

  • Dependencies that depend on Vue 2 internal apis or unrecorded behavior. The most common case is to use the private attribute VNodes on. If your project relies on component libraries such as Vuetify, Quasar, or ElementUI, it’s best to wait for Vue 3 compatible versions of them.

  • Internet Explorer 11 support: Vue 3 has officially dropped plans to support Internet Explorer 11. If you still need to support IE11 or lower, you must continue to use Vue 2.

  • Server-side rendering: Migration builds are available for SSR, but migrating custom SSR Settings is much more complex. The general idea is to replace vue-server-renderer with @vue/server-renderer. Vue 3 no longer provides a bundled renderer, it is recommended to use Vue 3 SSR with Vite. If you’re using Nuxt.js, you might be better off waiting for Nuxt 3.

As you can see, moving from Vue2 to Vue3 definitely costs something, so is there a way I can use the Composition API for Vue2 as well? In fact, there is already a solution. Check out @vue/ composition-API, which is a release candidate and was created specifically for vUE using composition-API.

Installation and use

NPM

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

SFC

You must install @vue/ composition-API as a plug-in through vue.use() before you can write components using composition-API. So, please. Normally in your project folder main.js is edited as follows:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)
Copy the code

Then, use this in the component.

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)
    }
  }
}
Copy the code

When you migrate to Vue 3, just replace @vue/ compositionAPI with Vue and your code will work fine.

Also, note that if you’re using TypeScript, you need to define components using defineComponent in order to correctly infer types in Vue component options.

import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  // type inference enabled
})
Copy the code

CDN

If you want to use A CDN, there is also a way. Include @vue/ compositionAPI after vue, which will install itself automatically.

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
Copy the code

At this point, @vue/ composition-API is exposed to the global variable window.vuecompositionAPI.

<! DOCTYPEhtml>
<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/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></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>
Copy the code

conclusion

@vue/ Composition-API supports all modern browsers and IE11+. You can use it in Vue2 projects and then seamlessly transition to Vue3 projects at the right time.

Here’s @vue/ comic-Apigithub:

https://github.com/vuejs/composition-api
Copy the code

In addition, there is more information about how to use the CompositionApi. Check out the official documentation below:

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

About the author

Author: Vam’s Golden Bean Road. CSDN blog star of the Year 2019, CSDN blog has reached millions of visitors. Nuggets blog post repeatedly pushed to the home page, the total page view has reached hundreds of thousands.

In addition, my public number: front-end experience robbed road, the public continues to update the latest front-end technology and related technical articles. Welcome to pay attention to my public number, let us together in front of the road experience rob it! Go!