vue3 react hooks

import { ref, shallowRef, reactive, shallowReactive, readonly, watchEffect } from 'vue'

export const useState = (value = null) => {
  const state = ref(value),
    setState = (value) => { state.value = value }
  return [readonly(state), setState]
}

export const useSetState = (value = {}) => {
  const state = reactive(value),
    setState = (value) => { Object.assign(state, { ...value }) }
  return [readonly(state), setState]
}

export const useStateShallowRef = (value = null) => {
  const state = shallowRef(value),
    setState = (value) => { state.value = value }
  return [readonly(state), setState]
}

export const useSetStateShallowReactive = (value = {}) => {
  const state = shallowReactive(value),
    setState = (value) => { Object.assign(state, { ...value }) }
  return [readonly(state), setState]
}

export const useEffect = (cb, arr) => {
  if (arr instanceof Array && arr?.length === 0) {
    watchEffect((callback) => {
      const result = cb?.()
      if (typeof result === 'function') callback(result)
    })()
  } else if (arr?.length) {
    // arr.forEach(item => {
    //   watchEffect((callback) => {
    //     const result = cb?.(item)
    //     if (typeof result === 'function') callback(result)
    //   })
    //   // watch(item,()=>{
    //   //   cb?.()?.()
    //   // })
    // })
    watchEffect((callback) => {
      const result = cb?.(arr)
      if (typeof result === 'function') callback(result)
    })
  }
  if (!arr) {
    watchEffect((callback) => {
      const result = cb?.()
      if (typeof result === 'function') callback(result)
    })
  }
}

用法：

const [state,setState]=useState(123)
const [search,setSearch]=useSetState({name:'123'})