状态过渡

1 .数字过渡

//自己写的
change(){
           this.changeFunction=setInterval(()=>{
               //判断是大还是小，实现增加，减少的过渡
               if(this.changes[1]this.value){
                   this.start-=this.minUnit
               }

               if(this.start==this.value){
                this.changes.push(this.start)
                this.changes.shift()
//这里的changes是把每次变换的数据单独放到一个栈，所以可以很方便的比较两次的大小，也和对这个的优化。

                   clearInterval(this.changeFunction)
//关键代码是这一行，一定要结束循环
               }
           },this.interval*1000)
       }


//使用animtejs
this.a1=anime({
                targets:this.obj,
                // 这里是需要变化的数组

                // 输入想要变化的值
                charged:90,
                easeing:'linear',
                round:1,
//变化的精度。但是目前就是没发现官网上的api文档。好多都是需要自己猜。
            })
//发现的bug，charged是90,也就是我要实现的渐变是要从0-90，但是实际效果是会变得超过100，然后在往下将。

2 .发现一个bug，就是同时使用v-model="value",然后把这个值传到一个子组件里面，子组件要求的数据格式是number，因为这个值是绑定的，所以会把最后一个空值都传过去。如何检测到空值，然后进行检测兼容
3 .那就是不直接传这个值，做一个兼容，传那个兼容值。typeof(this.value),当他为空的时候是个字符串。

组件的实时更新和异步需求的妥协

1 .由于是使用的bind绑定，然后props传到子组件中，所以父组件输入框的每一次细微变化都将会实时的传到子组件下面，导致数据的变化，而且这个变化非常的快，甚至有的时候我们想要输入一个两位数，刚输入一位的时候，他就认为改改变了，让我们进行变化。
2 .但是我们做这个过渡的目的就是为了让玩家的体验变得非常好，所以需要很缓慢的展示出数据的变化状况，这就需要不是那么敏捷国家的感应到数据的变化，所以可以在改变数据的时候加一个延迟函数。
3 .或者在watch的时候，判断前一个数和后一个数的前几位是不是一样的，如果前几位是一样的，那就证明还没有输入完毕，这个时候不开始进行状态过渡

优化

1 .如果是多位数的话，分位数进行变化，比如先变个位，个位到10了，开始变分位，等分位到了9，开始变百位。。。一层层的进行下去.现在就是这样，但是速度太慢了，又会影响输入的效率。用户会不会等的很急。先通过改变setInterval函数的第二个参数来简单模拟这个需求，可以满足，但是会有上面的问题。
2 .多提炼配置函数，让过渡更加的自然。

BUG

问题：如果现在设置的时间渐变比较大的话，再一次没变好的时候在进行第二次输入的话，或者是不停的快速变化数字的话，会停止循环。
思路：最后的时候进行一次检查，发现不一样的时候，在进行一次之前的变化,在做这个之前关键是要清掉上一次的循环

代码