Composition Api Vue2

安装

npm install composition-api-vue2

注册

import Vue from 'vue'
import CompositionApiVue2 from 'composition-api-vue2'

Vue.use(CompositionApiVue2)

使用

// 跟Vue3一样使用
import { reactive, ref, computed, watch, watchEffect, onMounted, onUnmounted } from 'composition-api-vue2'

export default {
    // 支持setup选项
    setup(props) {
        const state = reactive({
            count: 0
        })
        const double = computed(() => state.count * 2)
        watch(() => state.count, (newValue, oldValue) => {
            console.log(newValue, oldValue)
        })
        watchEffect(() => {
            console.log(state.count)
        })
        onMounted(() => {
            console.log('mounted')
        })
        return {
            state,
            double,
        }
    }
}

API

支持以下API

响应式

• ref
• reactive
• computed
• watch
• watchEffect

生命周期

• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted