解决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 Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
使用原生javascript开发计算器实例代码
Feb 21 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
jQuery动态添加
2016/04/07 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
详解python中的线程与线程池
2019/05/10 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
浅谈Python协程
2020/06/17 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
给校长的建议书500字
2014/05/15 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
公务员年度个人总结
2015/02/12 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Python+DeOldify实现老照片上色功能
2022/06/21 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python