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

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),晉中企業(yè)網(wǎng)站建設(shè),晉中品牌網(wǎng)站建設(shè),網(wǎng)站定制,晉中網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,晉中網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

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

方法一： 直接watch監(jiān)聽data的數(shù)據(jù)

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

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

方法二：自定義指令

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

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

自定義指令要新建一個js文件并引入vue源碼包

import Vue from 'vue'
/*自定義指令*/
/*el所綁定的對象，binding指令上的參數(shù)*/
Vue.directive('n',{
  /*插入數(shù)據(jù)時觸發(fā)*/
  inserted: function (el,binding) {
    console.log('插入',binding,el)
    el.innerHTML = binding.value
  },
  update: function (el,binding) {
    console.log('更新參數(shù)',binding)
    el.dataset.oldNum = binding.oldValue
    el.innerHTML = binding.value
  },
  bind:function (el,binding) {
    console.log('綁定參數(shù)',binding)
    el.innerHTML = binding.value
  }
})

.vue文件中使用

 import n from '../assets/n'