javascript - Vue 刷新页面时会触发事件吗

Question

刚学习vue不久，按照网上的demo做了一个简单的note，使用localstorage做本地存储，然后我想在刷新页面或者离开页面的调用localstorage方法，请问这样做能实现吗？如果可以，要怎么做？谢谢回答，感激不尽！

Answer 1

一般使用 Vue 开发时，不需要摸 window.onload 这类 DOM 相关的 API，而是使用 Vue 封装的组件生命周期钩子：

export default {
  // ...
  // 在组件初始化时调用，可以简单理解为页面加载时
  created () {
    // 存在 localStorage 的缓存内容
    if (localStorage.data) {
      this.myData = JSON.parse(localStorage.data)
    }
    else {
      // 页面无缓存内容时，初始化数据并写入缓存
      this.initData()
    }
  }
  // 在组件销毁前调用，但这并不能监听到页面退出的事件
  beforeDestory () {
    // 在此同样可对 localStorage 做一些处理
  }
}

Answer 2

用生命周期函数，根据需求选择用哪个，参考 https://cn.vuejs.org/v2/api/#选项-生命周期钩子

Answer 3

使用localstorage做本地存储，然后我想在刷新页面或者离开页面的调用localstorage方法

1、页面刷新使用localstorage，也就是当vue被实例化之后有如下几个可以供你使用：

export default {
    beforecreate() {
        //  创建前状态
    }
    created () {
        //  创建完毕状态
    }
    beforeMount(){
        //  挂载前状态
    }
    mounted(){
        //  挂载结束状态
    }
}

这几个都是可以在页面刷新的时候操作本地存储。
注： 其实本地存储也可以不写在vue实例当中，本质上与vue无关,你只是在当页面刷新的时候为了执行一段js而已

main.js

/* 项目启动 */
import Vue from 'vue'
import App from './App'
import router from './router'

/****************************
 写这里也不是不可以
****************************/
new Vue({
  router: router,
  render: h => h(App)
  // components: { firstcomponent, secondcomponent }
}).$mount('#app')

2、页面关闭与vue的生命周期无关，也不存在销毁一说，因此关闭页面没有方法让你使用操作localStorage，这一点跟楼上几位说的不一样。