需求

当页面中的数据发生改变时,刷新页面弹出警告框,提醒用户有未保存的数据,是否依然刷新。

要做的很简单,就是onbeforeunload这个函数在刷新页面时会自动触发一个弹窗,在普通页面中直接写在body中就完事。

在单页面应用中,这里我有判断的要求,数据变动时刷新才显示这个弹窗提醒,所以这个函数写在mounted中并不合适。input框中数据改变并不会让mountd中的该数据改变,所以要做的就是监听(很不想用,浪费性能)

封装 onbeforeunload

function onbeforeunload(target, path) {
  window.onbeforeunload = function(e) {
    if (target.$route.fullPath === path) {
      // 兼容IE8和Firefox 4之前的版本
      var e = e || window.event

      if (e) {
        e.returnValue = '关闭提示'
      } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return '关闭提示'
    } else {
      window.onbeforeunload = null
    }
  }
}
export default onbeforeunload

使用

import Onbeforeunload from '@/utils/onbeforeunload'
export default {
  watch: {
    disabled: function(e) {
      if (!e) { //这里我判断的是按钮是否禁用,当我的数据变化时,按钮是可点击true,当没有数据时是false。满足需求
        Onbeforeunload(this, '/edit/post-new')
      }
    }
  }
}

P.S 关于深度监听,跟是否初始化就监听

比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true

new Vue({
  el: '#root',
  data: {
    cityName: ''
  },
  watch: {
    cityName: {
      handler(newName, oldName) {
        // ...      },
      immediate: true,
          deep:true
    }
  } 
})

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。

也就是data下绑定了一个对象,你想监听这个对象中的某个属性,这时候就需要将deep置为true了


爬。