Composition API 使用总结

最近在项目中使用了vue的新属性，Composition API，这是一个最新版Vue3.0的组合式 API: 一组低侵入式的、函数式的 API，使得我们能够更灵活地「组合」组件的逻辑。由于Vue3.0目前还不太稳定，官方提供了这个API来体验Vue的最新的特征。大家可以尝尝鲜。

刚开始用的很不习惯，但慢慢地感受到了它带来的便利。下面是我使用一段时间后的总结。希望能够帮助各位前端读者快速地启用最新的姿势写Vue组件。

我们项目中使用的还是vue2.x，只是单独引入了@vue/composition-api,另外也使用了TypeScript，听说今年TS使用量大增，大家也要赶紧学起来啊，后面我也会带来一些TS的分享与总结。有兴趣的同学可以关注一下。

要使用Composition API 就要先安装，项目根目录下执行

npm i @vue/composition-api

项目中配置

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

Vue.use(VueCompositionAPI)

使用@vue/composition-api写一个简单的组件

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

<script>
  import { defineComponent, reactive } from "@vue/composition-api";

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

      function increment() {
        state.count++
      }

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

router，$message, vuex, emit的方法的改造

 import { defineComponent, reactive } from "@vue/composition-api";

  export default defineComponent({
    setup(props, {root, emit}) {

        // 使用root属性的$route
      const clusterId = root.$route.params.clusterId;

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

      function increment() {
        state.count++
        root.$message.success('操作成功')
        emit('input', state.count)
      }

      return {
        state,
        increment,
      }
    },
  })

setup从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用
第一个参数是props，第二个参数是上下文对象， 上下文对象中有包含以下几个属性attrs, slots, emit,

reactive的使用发

const obj = reactive({ count: 0 })

ref 的使用

const count = ref(0)

computed的使用

const count = ref(1)
const plusOne = computed(() => count.value + 1)

watch的使用

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

生命周期

setup() {
  onMounted(() => {
    console.log('mounted!')
  })
  onUpdated(() => {
    console.log('updated!')
  })
  onUnmounted(() => {
    console.log('unmounted!')
  })
},