vue如何獲取data數據改變前后的值

這篇文章主要介紹了vue如何獲取data數據改變前后的值，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

場景：購物車增加商品數量同時更新bridge標志上的總商品個數，如果只是加上當前變化后的數量的話則之前原有的數量會被重新添加一遍造成計算錯誤。因此要減去變化前的數量才能得到添加的數量。

方法一： 直接watch監聽data的數據

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

old為舊的值now為更新后的值

方法二：自定義指令

通過自定義指令將更新前的值綁定到對應自定義指令的元素的dataset上然后在vue文件里面通過ref獲取到元素來獲取舊的值

自定義指令就不多說了前面有寫過以前相關的博客了這里直接上代碼

自定義指令要新建一個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指令如果不加定時器得到的數據是上上次更新的數據

對比兩種方法，明顯是watch比較方便但是自定義指令，也是個不錯的東西學習一下可能以后其他地方會用到

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue如何獲取data數據改變前后的值”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!