vueデータを取得して前後の値を変更する方法

シーン：ショッピングカートは商品の数を増やしながら、bridgeマークの総商品数を更新します。現在の変化量を加えるだけで、以前からあった数量が新たに追加されて計算が間違ってしまいます。そのため、変化前の数量を差し引いてこそ、添加された数量が得られます。
方法1：直接ウォッチでdataのデータをモニターする

watch: {
a (now,old) {
console.log(now,old)
}
}

oldは古い値です。nowは更新後の値です。
方法二：カスタムコマンド
更新前の値をカスタムコマンドでカスタムコマンドに対応する要素のdatasetにバインドし、vueファイルから要素を取得して古い値を取得します。
カスタムコマンドは多くないです。前に前のブログに書いてあります。ここで直接コードをつけます。
カスタムコマンドはjsファイルを新規作成し、vueソースパッケージを導入します。

import Vue from 'vue'
/*     */
/*el      ，binding      */
Vue.directive('n',{
  /*       */
  inserted: function (el,binding) {
    console.log('  ',binding,el)
    el.innerHTML = binding.value
  },
  update: function (el,binding) {
    console.log('    ',binding)
    el.dataset.oldNum = binding.oldValue
    el.innerHTML = binding.value
  },
  bind:function (el,binding) {
    console.log('    ',binding)
    el.innerHTML = binding.value
  }
})

.vueファイルで使用する

 import n from '../assets/n'
<div ref="div" v-n="a"></div>
<button @click="inc">  </button>
inc () {
  this.a++
  var that = this
  setTimeout(function () {
    console.log(that.$refs.div.dataset.oldNum)
  },1)
}

ここのincはデータを更新するための操作です。なぜタイマーを設定しますか？
パラメータを変更してからv-n指令をトリガします。タイマーをかけないと得られたデータは前回更新したデータです。
二つの方法を比べると、明らかにウォッチが便利ですが、カスタムコマンドもいいです。勉強してみたら他のところで使えるかもしれません。
以上のこのvueはdataデータを獲得して前後の値を変える方法は小編集で皆さんに全部の内容を共有することです。参考にしてもらいたいです。どうぞよろしくお願いします。