如何在vue2.x中编写vue3的语法--解决方案

如何在vue2.x中编写vue3的语法–解决方案

特别注意,随着内置 Composition API 的Vue 2.7的发布，您不再需要这个插件。因此该插件已进入维护模式，将仅支持 Vue 2.6 或更早版本。该项目将于 2022 年底结束生命周期。

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

1,安装

可以通过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"
  },

2,使用

首先需要在 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'

3,demo中使用

<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 的效果是一样的。