vue中監聽用戶是否編輯表單操作

周六是比較適合回顧以及反思自己本周工作遇到問題的時間，在疫情期間，宅在家里翻一翻自己的一些小tips 也算是加深下自己的方法解決記憶 

在我們日常的工作中經常會遇到需求 ：這個表單填寫的頁面 ，當用戶修改了內容時，點擊返回提示，未修改內容則直接返回？

需求分析：其實這個問題歸於監測用戶在頁面中是否進行了操作？？ 

共計對比了兩個方法：

方法一：

 使用vue的updated的鈎子：updated是數據更新后調用，相對應的beforeUpdate,是啟用數據更新，在數據更新前調用

 原理就是監測data()中的數值變化：當data中的某個值改變的時候就進行計數增加

 使用方法

  updated:function () {
    this.updataUp++; //用於記錄更新次數的變量
     //console.log("用戶更改了數據"+this.updataUp);
  },

下圖是一張點擊彈框的觸發事件 打開組件+關閉組件 =2次觸發了data的更新

 

 

 因為updated監測的可是data中的所有值哦，所以任何一個變量的值改變的時候都會+1 ，

這種方法存在的問題

• data中變量過多的時候，需要我們自己去過濾掉非表單數據觸發的次數 （比如打開彈框，此時控制彈框的變量的值改變）

比較適合簡單的表單數據

方法二：

 vue的watch方法 也為我們提供了數據監測的功能

 templateList: {
      handler (val) { //templateList 為數組 調用hander 將數值傳入到頁面中
        if (val) {  
          this.updateCount++
            console.log("用戶編輯了"+this.updateCount)

        }
      },
      deep: true //遍歷較深的數據結構
    }

　　參照vue的createWatcher  

function createWatcher (
  vm: Component,
  expOrFn: string | Function,
  handler: any,
  options?: Object
) {
  if (isPlainObject(handler)) {
    options = handler
    handler = handler.handler
  }
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  return vm.$watch(expOrFn, handler, options)
}

　　這樣對於templateList數據列表進行改變時候，都可以監控到，

  一個頁面中不一定只存在templateList一個列表，如果存在其他的，進行添加就可以。

注意點：如果頁面初始化時候請求了接口，並且對監控的數據進行了改變，此時返回判斷需要減去這一次的更改

該方法返回的時候，只需要判斷是否 >1（數據根據頁面的初始化更新次數進行調整）即可

 

 

學習加油～