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

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

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

Composition API（组合 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')

setup() 函数

setup() 是 Vue3.0 中引入的一个新的组件选项，我们所使用Composition API都会写在这个函数内。
setup会在实力创建之前运行因此获取不到Vue的this

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

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

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

    function increment() {
      state.count++
    }

    return {
      ...toRefs(state),
      increment
    }
  }
}
</script>