This is the second day of my participation in the August More Text Challenge

Technology selection

With the release of the official version of Vue3, some of the company’s new projects started to enable Vue3, and some of the old projects are also migrating to Vue3

After the leadership let me sort out Vue3 knowledge points

👉👉 Some Vue3 knowledge points (600+👍)

However, some of the company’s projects were based on Vue2, so the leader asked me to investigate whether Vue3 syntax could be used in Vue2 projects.

Use the Vue3 syntax

So how to use Vue3’s syntax in Vue2 is with the @vue/ composition-API plugin.

Of course, there are still many differences and incompatibilities between this plugin and the official Vue3 version, and the mental burden is still there. This is also my first time using this plugin, and I don’t know what kind of pit will be waiting for me. But since it’s an official plugin, it shouldn’t be a problem.

@vue/composition-api

Let’s start with the @vue/ comaction-API plug-in

Introduction to the

While Vue3 is not officially released, the Composition API in the RFC phase can be played with the @vue/ composition-API plug-in.

NPM warehouse address

The installation

You can install it using NPM or YARN

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

My version of Vue and @vue/ composition-API is as follows

  "dependencies": {
    "@vue/composition-api": 13 "^" 1.0.0 - rc.."vue": "^ 2.6.11." "
  },
Copy the code

use

You first need to register it as a plug-in in main.js

import Vue from 'vue'
import App from './App.vue'
// Introduce the @vue/composition-api plugin
import VueCompositionAPI from '@vue/composition-api'
// Register to use the @vue/composition-api plugin
Vue.use(VueCompositionAPI)

new Vue({
  render: h= > h(App),
}).$mount('#app')

Copy the code

We then introduce the Composition API we need to use in the component, not from the Vue

import { ref } from '@vue/composition-api'
Copy the code

This demo project is built with the latest version of VUe-CLI, the build process will not demonstrate, modify the content of helloworld.vue

<template>
  <div>
    <button @click='increase'>Click on the add</button>
    <br>
    <br>
    <button @click='reduce'>Click to reduce</button>

    <h1>{{number}}</h1>
  </div>
</template>

<script>
import { ref, reactive } from '@vue/composition-api'
export default {
  setup() {
    const number = ref(0)
    const increase = () = > {
      number.value += 1
    }
    const reduce = () = > {
      number.value -= 1
    }
    return {
      number,
      increase,
      reduce,
    }
  },
}
</script>
Copy the code

Results demonstrate

This is what the project looks like when it runs.

This will do what we want, just like we did with Vue3.

But after all, as a new plug-in introduced, there must be a lot of Vue3 does not support, what is supported, what is not supported, there are standards in the NPM repository, if you want to use it, you must first read the documentation, otherwise you will write bugs.

NPM warehouse address