技术选择

随着Vue3正式版本的发布，公司的部分新项目开始启用Vue3，部分老项目也在向Vue3迁移

继领导让我整理一下Vue3知识点之后

👉👉整理的一些Vue3知识点（600+👍）

但是公司还是有部分项目是基于Vue2的，于是领导又让我调研一下能不能在 Vue2 的项目中使用 Vue3 的语法。

使用Vue3语法

那么如何在Vue2中使用Vue3的语法呢，那就是借助@vue/composition-api插件。

当然这个插件和Vue3正式版依然存在很多区别和不兼容的地方，心智负担还是有的。这个插件我也是第一次用，还不知道都会有什么样的大坑在等待着我。但既然是官方的插件，问题应该不大。

@vue/composition-api

先来介绍一下 @vue/composition-api 插件

简介

Vue3尚未正式发布时，处于RFC阶段的 Composition API 可以通过插件 @vue/composition-api 进行体验。

NPM仓库地址

安装

可以通过npm或者yarn正常安装即可

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

我的 Vue 以及 @vue/composition-api 的版本如下

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

使用

首先需要在 main.js 中以插件的形式注册使用

import Vue from 'vue'
import App from './App.vue'
//引入@vue/composition-api插件
import VueCompositionAPI from '@vue/composition-api'
//注册使用@vue/composition-api插件
Vue.use(VueCompositionAPI)

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

然后我们在组件中引入需要使用的 Composition API ，这里注意不是从 Vue 中引入

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

这个演示的工程是用最新版本的 vue-cli 搭建的，搭建过程就不演示了，修改 HelloWorld.vue 中的内容

<template>
  <div>
    <button @click='increase'>点击增加</button>
    <br>
    <br>
    <button @click='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>

效果演示

项目跑起来后是这样的。

这样就可以达到我们的目的了，跟我们使用 Vue3 的效果是一样的。

但是毕竟作为一个尝鲜的插件引入，必然存在很多不支持 Vue3 的 地方，支持什么，不支持什么，在 NPM 仓库中都有标准，如果小伙们想要使用的话，一定要先看看文档，不然就要写 bug 了。

NPM仓库地址