preface

This article introduces developing Web pages using Vue2.6x +TypeScript+CompositionAPI.

We chose VUe2 because we needed to support IE11, but at the same time, we were looking forward to the composite API development approach of Vue3, so we used @vue/ compose-API.

If possible, please go directly to VUe3, after all, the scheme in this paper does not have many excellent new functions of VUe3, so it is not a replacement. It’s 2022 and you don’t need VUE3? The scheme of this paper is also a kind of helpless move.

Finally, in order to write more formal code and reduce the likelihood of errors, we use TypeScript again. Using TypeScript handles better type judgment and, most importantly, better interface programming.

Will learn

• vue2+TypeScript
• Vue2’s composite API plugin @vue/ composition-API

Began to practice

Create a TS project for VUe2

First we create a VUe2 TS project using VUE-CLI. Select “custom” and check TypeScript, ESLint, vue2 all the way. Thus, we have a vue2+TypeScript project.

Introduction of composite apis

Install @ vue/composition – API.

npm install --save--dev @vue/composition-api
Copy the code

Add @vue/ composition-API plugin to main.ts.

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

Rewrite. Vue file ts code.

Define components using defineComponent, using HomeView as an example.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ dataMsg }}</h2>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from '@vue/composition-api'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup (props, context) {
    console.log('context', context)
    const dataMsg = ref('This is data msg')
    return {
      dataMsg
    }
  }
})
</script>
Copy the code

Considerations for using composite apis

Use defineComponent to provide better type inference for VUE instances

The {} of export default {} is a simple Object type, ts cannot specifically remind us what attributes vUE components need. Export default defineComponent({}) takes {} as the parameter of defineComponet. By indicating the type of parameters, you can indicate the type of VUE components.

See defineComponent in Vue for details

Limitations of @vue/ Composition-API compared to vue3 composite API

The reference limit

GetCurrentInstance is not always available

GetCurrentInstance is used to access the instance of the current internal component, but it is not always available.

WARNING

GetCurrentInstance is only exposed for higher-order use scenarios, typically in libraries. The use of getCurrentInstance in application code is strongly discouraged. Don’t use it as an alternative to getting this in a composite API.

GetCurrentInstance can only be called in setup or lifecycle hooks.

Consider the following example:

const MyComponent = {
  setup() {
    const internalInstance = getCurrentInstance() / / effective

    const id = useComponentId() / / effective

    const handleClick = () = > {
      getCurrentInstance() / / is invalid
      useComponentId() / / is invalid

      internalInstance / / effective
    }

    onMounted(() = > {
      getCurrentInstance() / / effective
    })

    return () = >
      h(
        'button',
        {
          onClick: handleClick
        },
        `uid: ${id}`)}}Copy the code

Vue-router is used in the composite API

Since there is no this in Setup, vue-Router4.x provides vue3 with an additional way to get a Router and route.

//vue3 + vue-router4.x
import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) {
      router.push({
        name: 'search'.query: {
          ...route.query,
        },
      })
    }
  },
}
Copy the code

However, there are no related methods in VUe2 vue-Router3. x. We can export a useRouter and useRoute method to expose the router and route.

//vue2 + @vue/composition-api + vue-router3.x
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
});

export const useRouter = () = > router;
export const useRoute = () = > router.currentRoute;

export default router;
Copy the code

conclusion

The author of this scheme is also just used, specific will encounter what pit, the author encountered again record, will continue to add this document, please pay attention to…

reference

@vue/composition-api

Vue3 composite API

Vue Router and composite API

The Vue defineComponent