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!) }) },