创建期间的生命周期函数：

• beforeCreate：此时组件实例已创建，但 data 和 props 还未初始化。
• created：此时组件实例已经创建完成，data、props 已经初始化，此时还没有开始编译模板和挂载 DOM
  • 响应式系统已经建立，数据已经可用，但此时还没有进行 DOM 渲染
  • 还无法访问 this.$el，因为 DOM 尚未被挂载
• beforeMount：此时组件已完成了模板编译，但是还没有挂载到页面中，DOM 尚未渲染。
  • 换句话说，此时页面中的类似 {{msg}} 这样的语法还没有被替换成真正的数据。
• mounted：此时组件已挂载到真实 DOM，可以访问 DOM 元素。
  • 用户已经可以看到渲染好的页面了

运行期间的生命周期函数：

• beforeUpdate：当响应式数据更新时，此钩子会在虚拟 DOM 重新渲染之前调用
  • 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
• updated：虚拟 DOM 重新渲染并应用更新到真实 DOM 后调用
  • 此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

销毁期间的生命周期函数：

• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed: 在实例销毁后调用，此时组件的所有事件监听器、子实例、以及 DOM 绑定都已销毁。

注意：

• 刷新页面并不会触发 beforeDestroy 或 destroyed

mounted: function () {
  let _beforeUnload_time = 0, _unload_time = 0
  // 窗口关闭或刷新时候的操作
  window.addEventListener('beforeunload', (event) => {
      _beforeUnload_time = new Date().getTime()
      // Cancel the event as stated by the standard
      // event.preventDefault();
      // Chrome requires returnValue to be set.
      // event.returnValue = '';
  });

  window.addEventListener('unload', (event) => {
      _unload_time = new Date().getTime()
      console.log(_unload_time - _beforeUnload_time)
      // 关闭页面通常小于100毫秒
      if (_unload_time - _beforeUnload_time <= 100) {
          //业务代码
          this.stopUsing()
      }
	});
}

// 然在对应的业务代码地方用自己的函数即可，原理是刷新页面与关闭页面时两个事件的事件间隔不一样，关闭页面通常小于100ms
// 另外需注意上方有四行注释的代码，如果不注释，就会在关闭和刷新的时候提醒用户是否关闭，而用户的选择时间也会算进去，影响我们两个事件的事件间隔判断，因此注释掉。

// 页面加载时只执行onload
// 页面关闭时先执行onbeforeunload，最后onunload
// 页面刷新时先执行onbeforeunload，然后onunload，最后onload