SOURCE

Vue.component("animated-integer", {
  template: "<span>{{ tweeningValue }}</span>",
  props:{
    value: {
    	type: Number,
    	require: true
    }
  },
  data () {
    return {
      tweeningValue: 0
    }
  },
  watch: {
    value (newValue, oldValue) {
      this.tween(oldValue, newValue)
    }
  },
  mounted: function () {
    this.tween(0, this.value)
  },
  methods: {
    tween (startValue, endValue) {
      /* 使用tween.js方法 */
      var vm = this
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }
      new TWEEN.Tween({ tweeningValue: startValue })
        .to({ tweeningValue: endValue }, 500)
        .onUpdate(function () {
          vm.tweeningValue = this.tweeningValue.toFixed(0)
        })
        .start()
      animate()
      
      /* 不使用tween.js */
      /* var vm = this
      function plus () {
        if (startValue < endValue) {
          startValue ++ 
          vm.tweeningValue = startValue
          requestAnimationFrame(plus)
        }
      }
      plus() */
    }
  }
})

new Vue({
  el: "#app",
  data: {
    firstNumber: 20,
    secondNumber: 40
  },
  computed: {
    result () {
      return this.firstNumber + this.secondNumber
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<div id="app">
  <input type="number" v-model.number="firstNumber" />  + 
  <input type="number" v-model.number="secondNumber" /> =
  {{ result }}
  <p>
    <animated-integer :value="firstNumber"></animated-integer> +
    <animated-integer :value="secondNumber"></animated-integer> =
    <animated-integer :value="result"></animated-integer>
  </p>
</div>

html,body{
  background-color:#333;
  color:#999;
}