phpjavac / composition Goto Github PK

使用场景

某些函数需要手动清除副作用
eg: setInterval、setTimeout、addEventListener...
这些函数在组件销毁后，需要手动在 destroy或onUnmounted钩子中清除副作用

使用useEffect时，就可以只在一个函数中直接处理这些副作用，而不需要再手动调用组件销毁钩子
eg:

// 需要处理副效应
useEffect(()=>{
    const i = setInterval(()=>{
        console.log('this is interval, when Unmounted I`m destroy');
    }, 2000);
    return () => {
        clearInterval(i);
    }
})
// 不需要处理副效应
useEffect(()=>{
    const ii = setInterval(()=>{
        console.log('I`m interavl, but always')
    }, 2000)
})

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

参考了React的useEffect方法

两个关键点

• 可以选择性的执行一个无副作用的函数
  • 如果不 return 则表示不需要清除副作用
• 调用函数的机制
  • 初始调用
  • 当依赖项的值发生了变化时，也去触发对应的函数

用vue实现该钩子，初版先能够实现第一个关键点: 能够无副作用的执行一个函数

Interface

type UseEffectVoid = () => void; // 不需要处理副效应
type UseEffectFunVoid = () => () => void; // 需要处理副效应

Option

使用场景

新特性使用场景

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

esbuild打包

使用场景

当需要监听键盘，并触发某些代码的时候调用

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

// 键码
type KeyType = KeyboardEvent['key'] | KeyboardEvent['key'][];
// 触发类型
type keyEvent = 'keydown' | 'keyup' | 'keypress';
// 执行的函数类型
type EventMethod = (event?: KeyboardEvent) => void;
// option选项
interface EventOption {
    events?: Array<keyEvent>,
}

使用场景

• 文档右上角增加内容搜索功能
• 增加 github 跳转链接

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

暂时为本地索引，待@vuepress/plugin-docsearch@next 通过后，替换为docsearch🤔

使用场景

新特性使用场景

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

1

使用场景

新特性使用场景
跨组件传递消息

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

const bus = useBus() 
or
const { emit , on } = useBus()

bus.emit('',value) 
or 
emit('',value)


bus.on('',(value)=>void) 
or 
on('',(value)=>void)

使用场景

新特性使用场景

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

添加useAnimation

使用场景

目前useEffect可以满足

• 立即执行某个函数 fun
• 如果函数 fun 有返回值，则在页面销毁时清除其副作用

新特性

• 传入第二个参数 arr 数组
• 当数组 arr 中的变量发生变化，再次执行函数 fun

已用 vue 还原 react 的useEffect方法

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

第二个参数 arr 数组

const refData = ref(1)
const reactiveData = reactive({a: 1})
// 需要监听变量并重新执行函数
useEffect(()=>{
    console.log('需要监听变量并重新执行函数', refData.value, reactiveData.a)
}, [refData, reactiveData])

使用场景

import { useTitle } from 'zcomposition'

const title = useTitle()
console.log(title.value) // print current title
title.value = 'Hello' // change current title

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

import { useTitle } from 'zcomposition'

const messages = ref(0)

const title = computed(() => {
return !messages.value ? 'No message' : ${messages.value} new messages
})

useTitle(title)

bug描述

bug描述 不小心删除文件 直接注释该文件的引用

版本号

0.0.1 (Default)

在哪些浏览器上看到这个问题？

Chrome

相关日志输出

No response

Contact Details

No response

使用场景

新特性使用场景
创建ws链接，并自带断线重连

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

入参：ws配置项
返回值：ws的各种回调（error、message...）

使用场景

• 增加分类目录
• 修复点击链接，左菜单未激活

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

无

使用场景

新特性使用场景
�页面加载时，设置了apiLoading，如果网速快，loading就会很快关闭。
设置一个最小时间，如果要执行的函数 funAsync 的执行时间小于设定时间 time 则等待执行时间满足 time 时，再去执行函数 funThen （当funAsync执行完毕后要执行的函数）

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

参数

  funAsync: () => void, // 想要执行的异步函数 比如api请求
  time: number, // 最小时间
  funThen: () => void, // 满足最小时间后，要执行的函数 比如设置loading状态

使用场景

保存时，自动按照eslint格式化代码

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

无

bug描述

构建失败

版本号

0.0.1 (Default)

在哪些浏览器上看到这个问题？

Firefox, Chrome, Safari, Microsoft Edge

相关日志输出

No response

Contact Details

No response

使用场景

新特性使用场景
元素出现或消失在浏览器视图内触发

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

参数 targetDom （Ref<HTMLElement | null>）
const finalResult = useObserver(targetDom);

bug描述

useHover事情触发失败
useAwaitDom模块导入失败
usePermission模块导入失败
useClipboard模块导入失败
useTitle模块导入失败

版本号

0.0.1 (Default)

在哪些浏览器上看到这个问题？

Chrome

相关日志输出

No response

Contact Details

[email protected]

使用场景

实现鼠标聚焦触发事件，失焦触发事件

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

入参：需要使用的节点dom, 回调函数
回调：聚焦/失焦时触发
异常：可能出现dom挂载问题(解决)

使用场景

新特性使用场景

等待一个dom或 ref 出现然后执行回调

可用于搭建引导系统

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

interface IUseAwaitDomOptions {
  /**
   * dom 获取器
   */
  domSelector: (() => HTMLElement | null) | Ref<HTMLElement | null>
  /**
   * 最大等待时间（单位：ms）
   */
  maxWait?: number
}

使用场景

新特性使用场景

一个简单的全局单例仓库

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

const store = useGlobalStore({ count: 0 })

const store2 = useGlobalStore()

store === store2 // true

使用场景

新特性使用场景[feat]: useDebounceFn & useThrottleFn

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

[feat]: useDebounceFn & useThrottleFn

使用场景

新特性使用场景
目前 useAsync 可以更新异步函数的 状态loading 和 数据response

想法 再新增一个可选参数 minTime 最小执行时间

• 和 useWaitTime类似，给异步函数设置一个最小执行时间
• 使用场景和和 useWaitTime 相同，控制loading的最小展示时间

不算是解决痛点，只是拓展了功能

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

demo 这个例子，只做展示用，所以只处理了loading
export const useWaitAsync = <T>(fun: ()=>Promise<T>, minTime: number) => {
/** 这个函数是为了保证首页不会loading太快 */
  const data = ref< T | undefined>();
  const loading = ref(true);
  const error: {code?: string, message?: string} = {};
  let loadingTemp = true;
  const promise = () => new Promise<void>((reslove, reject) => {
    fun().then((res: T) => {
      // 这里不再直接赋值，而是先暂存
      data.value = res;
      error.code = '0';
      error.message = '';
      //   loading.value = false;
      loadingTemp = false;
      reslove();
    }).catch((err: string) => {
      data.value = undefined;
      error.code = '999999';
      error.message = err;
      //   loading.value = false;
      loadingTemp = false;
      reject();
    });
  });
  useWaitTime(() => promise(), minTime, () => {
    // 满足最小时间后，再进行赋值，保证最小执行时间
    loading.value = loadingTemp;
  });
  return {
    data,
    loading,
    error,
  };
};

使用场景

新特性使用场景
进入视图/移除视图 需要有回调参数

### 类型

新功能 (在原有的功能上拓展新功能)

### 参数、回调或其他补充

import { useObserver } from 'zcomposition';

const targetDom = ref(null);
const finalResult = useObserver(targetDom,(val)=>{
// 为true则是可视
if(val){
}
},);

使用场景

新特性使用场景

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

添加 commitlint 支持

使用场景

新特性使用场景
元素出现或消失在浏览器视图内触发

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

参数 targetDom （Ref<HTMLElement | null>）
const finalResult = useObserver(targetDom);

bug描述

useSize切换到其他页面会报错

版本号

0.0.1 (Default)

在哪些浏览器上看到这个问题？

Chrome, Microsoft Edge

相关日志输出

v-db21e3ae.b5c0538d.js:1 Uncaught TypeError: Cannot read properties of null (reading 'clientHeight')
    at ResizeObserver.<anonymous> (v-db21e3ae.b5c0538d.js:1)

Contact Details

No response

问题描述

项目初期，有一些配置没有完善，保持一个开放的议题以供相关配置修改的提交能够快速关联到这个议题，防止重复创建相似的议题。

版本号

next (未来可能)

使用场景

新特性使用场景
接受一个异步函数 返回 err,loadging,data

类型

新钩子 (之前没有，新加的功能)

参数、回调或其他补充

promise回调事件

使用场景

规范代码风格

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

1. 在 commit 时自动执行 eslint 格式化代码
2. 可以手动执行 npm run lint:fix 格式化 src 目录下的文件

使用场景

配置md导入代码文件，修复useEventBus部分问题

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

1. 可以在 md 中使用 @[code](@/src/index.ts) 导入代码文件内容
2. 修复 useEventBus 部分问题，更新 useEventBus 文档
3. 更新 tsconfig
4. 添加 NpmBadage 组件

使用场景

import { useDownloader } from "zcomposition";
替换为
import { useDownloader } from "@lib";

类型

新功能 (在原有的功能上拓展新功能)

参数、回调或其他补充

无