muskanmahajan37 / composition-api Goto Github PK

View Code? Open in Web Editor NEW

纯 vue2 代码实现的 composition-api，不依赖 ES6 的 Proxy 对象，轻量，无依赖。不兼容官方的 @vue/composition-api，理论上只要 vue2 兼容的浏览器都能运行。

License: MIT License

JavaScript 5.29% TypeScript 94.71%

composition-api's Introduction

@zhengxs/composition-api

纯 vue2 代码实现的 composition-api，不依赖 ES6 的 Proxy 对象，轻量，无依赖。

不兼容官方的 @vue/composition-api，理论上只要 vue2 兼容的浏览器都能运行。

TS 文档｜在线演示

快速开始

安装

$ npm i @zhengxs/composition-api --save

使用

import CompositionAPI from '@zhengxs/composition-api'

Vue.use(CompositionAPI)

示例

响应式状态

import { defineComponent, reactive, ref } from '@zhengxs/composition-api'

export default defineComponent({
  setup() {
    // 注意和官方的有区别
    const loading = ref(false)

    const state = reactive({
      msg: 'Vue',
    })

    return {
      loading,
      state,
    }
  },
})

生命周期

import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeDestroy,
  onDestroyed,
} from '@zhengxs/composition-api'

export default defineComponent({
  setup() {
    onBeforeMount(() => {
      // 挂载前，对应 created
    })

    onMounted(() => {
      // 挂载后，对应 mounted
    })

    onBeforeDestroy(() => {
      // 销毁前，对应 beforeDestroy
    })

    onDestroyed(() => {
      // 销毁后，对应 destroyed
    })
  },
})

数据监听

import {
  defineComponent,
  reactive,
  watchEffect,
} from '@zhengxs/composition-api'

export default defineComponent({
  setup() {
    const list = reactive([])

    watchEffect(() => {
      console.log('length:', list.length)
    })

    function addItem() {
      list.push({
        id: Math.random(),
        text: `item ${list.length}`,
      })
    }

    return {
      list,
      addItem,
    }
  },
})