如何在vue2项目中灵活的使用composition Api

查看项目vue版本号

如果你的版本号是2.7，那么不需要引入插件就能使用组合式 Api，如果小于这个版本号就需要引入相关插件才能正常使用。

版本号小于2.7:

# 下载插件
npm install @vue/composition-api

# 入口文件

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

Vue.use(VueCompositionAPI)

如果是大于2.7，只需在单文件中引入就可以了。

import { ref, reactive, watch, onMounted} from 'vue

组件页面：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { reactive, onMounted } from '@vue/composition-api'

export default {
  setup() {
    const state = reactive({
      message: 'Hello, world!'
    })

    onMounted(() => {
      console.log('Component mounted')
    })

    return {
      ...state
    }
  }
}
</script>

如何使用props、挂载组件，如何抛出事件：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { reactive, onMounted } from '@vue/composition-api'

export default {
  // 定义props
  props: {
      props1: {
        type: 类型自定义,
        default: 自定义
      }
  },
  // 挂在组件
  components: { 组件1, 组件2}
  setup(props, {emit}) {
    // 在这里可以访问props
    const state = reactive({
      message: 'Hello, world!'
    })

    onMounted(() => {
      // 项目表父组件抛事件
      emit('事件名', 你要穿的参数)
      console.log('Component mounted')
    })

    return {
      ...state
    }
  }
}
</script>

了解以上这些其实已经能解决大部分问题了。

说到这里大家可能会担心，在项目中使用组合式api会不会产生冲突，我在这里提一句：

如果你决定在项目中使用它，那么你务必遵循一个组件用一种语法开发，独立维护，你可以在vue2页面中使用它并且进行需求交互，但是不要一个组件又想使用vue3组合式api又想使用vue2选项式api，否则会出现奇奇怪怪的问题，并且自己无法解决。

我在vue2项目中使用组合式api目前还没有遇到奇奇怪怪的额问题，还有一些使用总结我会在后续更新上去，这篇文章希望能帮到遇到困难的小伙伴，点个赞呗！