在Vue2.x项目中愉快使用3.0特性

早在 Vue3 源码公布之前，Vue 官方已经透露了代表下一代 Vue 技术的 Vue3 将采取的新的接口使用方式。这种新的方式叫做 Composition API （组合式 API）。随着Vue3 pre-alpha版本的发布，相信小伙伴们已经按耐不住跃跃欲试的心情，下面我为大家简单介绍如何在项目中平滑引入vue3.0特性。

Composition API

@vue/composition-api是早期推出用来让开发者能在第一时间体验到vue3.0标准的一个vue插件，该插件在不破坏2.x语法的情况下加入3.0的语法特性。如上文所说，Vue pre-alpha版本的出现意味着源码已经趋于稳定，我们也可以放心在项目中引入这个插件。

使用

下载了 @vue/composition-api 插件以后，按照文档在 main.js 引用便开启了 Composition API 的能力。

main.js

import Vue from 'vue'
import App from './App.vue'
import VueCompositionApi from '@vue/composition-api'

Vue.config.productionTip = false
Vue.use(VueCompositionApi)

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

如果，你项目是用的 TS，那么请使用 createComponent 来定义组件，这样你才能使用类型推断

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

const Component = createComponent({
  // ...
})

setup() 函数

setup() 是 Vue3.0 中引入的一个新的组件选项，我们所使用大部分composition api都会写在这个函数内。

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

以上。

参考:
compostion api 文档
来自vue3.0尝鲜