javascript - Löst Vue beim Aktualisieren der Seite ein Ereignis aus?

Question

Ich habe gerade Vue gelernt und gemäß der Online-Demo eine einfache Notiz gemacht: Ich möchte Localstorage für die lokale Speicherung verwenden. Kann dies erreicht werden, wenn ich die Seite aktualisiere oder verlasse? Wenn das so ist, wie? Vielen Dank für Ihre Antwort, ich weiß das zu schätzen!

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，这一点跟楼上几位说的不一样。