解决vue项目F5刷新mounted里的函数不执行问题


Posted in Javascript onNovember 05, 2019

项目背景

在主文件index.vue中初始化页面相关的操作,

在mounted中放置用户权限判断并更新store中的权限值,当点击相应组件时mounted可正常工作,

但是在用户手动刷新时mounted内的函数并未执行,导致相应组件未获取到权限而显示异常

问题解决

首先,这跟vue生命周期有关,图就不贴了,直接说原因。

当用户f5刷新页面时,整个页面会重新去请求,js的状态变量消失,但是el节点并未重新建立。

因为,mounted是el被新创建的vm.$el替换,并挂载到实例上去之后调用的钩子,此处el并未重新挂载,故该钩子函数不会被调用。

此处可以将用户权限判断的方法根据实际情况写在beforeMount或created中

常见的钩子触发事件

beforeCreate

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。数据和实例都不能访问

created

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

数据可以访问,实例不可访问

beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

DOM挂载前,数据可访问,实例$el为虚拟DOM节点,不可访问,数据还未插入DOM中

mounted

el 被新创建的 vm.el替换,并挂载到实例上去之后调用该钩子。此时 el 替换,并挂载到实例上去之后调用该钩子。此时el替换,并挂载到实例上去之后调用该钩子。此时el为真实的DOM元素

beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

updated

数据更新之后。

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。此时实例还可以使用

destroyed

Vue 实例销毁后调用。此时Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

以上这篇解决vue项目F5刷新mounted里的函数不执行问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两个数组去重的JS代码
Dec 04 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
js对象的复制继承实例
Jan 10 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
js封装成插件的步骤方法
Sep 11 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
layui表格数据重载
Jul 27 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
vue input标签通用指令校验的实现
Nov 05 #Javascript
vue子传父关于.sync与$emit的实现
Nov 05 #Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 #Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 #Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 #Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 #Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 #Javascript
You might like
关于PHP中的Class的几点个人看法
2006/10/09 PHP
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
说一说Python logging
2016/04/15 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
python脚本定时发送邮件
2020/12/22 Python
Python学习之time模块的基本使用
2021/01/17 Python
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
毕业生自荐书
2014/02/02 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
小学社会实践活动总结
2014/07/03 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
学校德育工作总结2015
2015/05/11 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Nginx反向代理、重定向
2022/04/13 Servers
Python自动化实战之接口请求的实现
2022/05/30 Python