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（数据根据页面的初始化更新次数进行调整）即可

 

 

学习加油～