vue中如何优雅的实现数字递增特效

需求

前几天项目开发中遇到一个需求，需要在数字更新时，实现其动态递增的效果

并且，在数字大于10000时，将单位进行转换，如数字大于10000时，单位从m²变为万m²

我们以vue中开发为例，一一实现下这两个需求。

实现

基本开发思路

实现数字递增，最容易的，我们应该可以想到通过setinterval函数实现数字累加功能。比如，我们的最终值是finanllyNum， 我们可以很快想到这样的函数：

let finalNum = 1200
let count = 0
let timer = setInterval(() => {count ++ if(count > finalNum){// 避免count大于finalNum最终数字显示不对count = finalNum// 清空定时器clearInterval(timer)timer = null}
}, 10); 

这个代码中，count是我们要实时在浏览器中显示的数字。我们每10ms实现数字进行一次递增，从而实现数字的动态递增特效。

指令的开发

由于项目中涉及很多这样的功能点，因此，这个功能应该被统一进行封装和复用。由于我们使用的是vue技术栈，显然，通过vue中的指令来实现这个功能最合适。

以下实现方案基于vue指令实现，因此，您需要参考官网了解学习vue中指令的基本用法。

vue2和vue3指令的用法大同小异，本示例以vue2进行演示

指令的基本结构

首先，我们创建change.js文件，写入指令的最基本结构

// js实现动态变化的数字