countUp 简介
countup.js 是一种无依赖项的轻量级 javascript 类，可用于快速创建以更有趣的方式显示数字数据的动画。countup 可以在两个方向上进行计数，具体取决于传递的开始和结束值。
虽然现在市面上基于 countUp.js 二次封装的Vue组件不在少数， 但我个人是不太喜欢使用这些第三方封装的，因为第三方组件的更新频率很难保证，也许作者只是一时兴起封装上传了， 并未打算继续维护，如果使用了 等于后续根本没有维护性了， 所以这种二次封装我推荐自行实现， 我们可以通过本次封装熟悉一下 vue3, ts 的语法
countUp 组件封装
首先进行安装
npm i countup.js
安装好之后新建文件 CountUp.vue ， template部分很简单， 只需要一个span标签， 同时给span一个 ref='countupRef' 就完成了，首先引入 countup.js， 按住Ctrl鼠标左键点击Countup.js可以看到 d.ts文件， countUp.d.ts 如下
export interface CountUpOptions {
startVal?: number;
decimalPlaces?: number;
duration?: number;
useGrouping?: boolean;
useIndianSeparators?: boolean;
useEasing?: boolean;
smartEasingThreshold?: number;
smartEasingAmount?: number;
separator?: string;
decimal?: string;
easingFn?: (t: number, b: number, c: number, d: number) => number;
formattingFn?: (n: number) => string;
prefix?: string;
suffix?: string;
numerals?: string[];
enableScrollSpy?: boolean;
scrollSpyDelay?: number;
scrollSpyOnce?: boolean;
onCompleteCallback?: () => any;
plugin?: CountUpPlugin;
}
export declare interface CountUpPlugin {
render(elem: HTMLElement, formatted: string): void;
}
export declare class CountUp {
private endVal;
options?: CountUpOptions;
version: string;
private defaults;
private rAF;
private startTime;
private remaining;
private finalEndVal;
private useEasing;
private countDown;
el: HTMLElement | HTMLInputElement;
formattingFn: (num: number) => string;
easingFn?: (t: number, b: number, c: number, d: number) => number;
error: string;
startVal: number;
duration: number;
paused: boolean;
frameVal: number;
once: boolean;
constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions);
handleScroll(self: CountUp): void;
/**
* Smart easing works by breaking the animation into 2 parts, the second part being the
* smartEasingAmount and first part being the total amount minus the smartEasingAmount. It works
* by disabling easing for the first part and enabling it on the second part. It is used if
* usingEasing is true and the total animation amount exceeds the smartEasingThreshold.
*/
private determineDirectionAndSmartEasing;
start(callback?: (args?: any) => any): void;
pauseResume(): void;
reset(): void;
update(newEndVal: string | number): void;
count: (timestamp: number) => void;
printValue(val: number): void;
ensureNumber(n: any): boolean;
validateValue(value: string | number): number;
private resetDuration;
formatNumber: (num: number) => string;
easeOutExpo: (t: number, b: number, c: number, d: number) => number;
}这里 export 了一个 CountUp 类 还有一个 CountUpOptions 的interface， CountUp 类的 constructor 接收三个参数， 分别是 dom节点， endVal， 以及 options， 我们将这三个参数当成是 props 传入同时给定默认值， , 首先获取span的ref作为 countUp初始化的容器 , 定义一个变量 numAnim 接收 new CountUp(countupRef.value, props.end, props.options) 的返回值， , 在 onMounted中初始化countUp.js,接着我们就可以去页面引入 CountUp.vue 看看效果，因为有默认值，所以我们不需要传入任何参数， 直接看就好了， 此时CountUp.vue组件代码如下，
立即学习“前端免费学习笔记（深入）”；
这时我们发现，在 onMounted 执行之后， 如果我们的endVal值发生了改动， 由于 CountUp.vue的 onMounted 已经完成，并不会同步修改， 如果我们的值是异步获取的，会造成渲染不出我们想要的结果，那么我们就需要在组件中把这个 initCount 方法给暴露给父组件使用，在vue3中，我们只需要使用 defineExpose 暴露即可， 同时我们也进一步完善一下我们的props， 校验限制一下传入的optinos值， 尽量避免使用上的错误， 同时修改一下默认值，避免造成一些问题，最终的代码如下
