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

问题描述

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

问题解答

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

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

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

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