需求

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

要做的很简单，就是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了

赏

爬。