解决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 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
js转义字符介绍
Nov 05 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
如何优化vue打包文件过大
Apr 13 Vue.js
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生成EXCEL的东东
2006/10/09 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP实现微信提现功能
2018/09/30 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
Vue使用NPM方式搭建项目
2018/10/25 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python自动化生成IOS的图标
2018/11/13 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
如何填写个人简历自我评价
2013/12/10 职场文书
2014年高考决心书
2014/03/11 职场文书
商业街策划方案
2014/05/31 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
公司表扬信格式
2015/05/04 职场文书
投资合作意向书范本
2015/05/08 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers