解决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 相关文章推荐
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 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 常用类整理
2009/12/23 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
理解javascript模块化
2016/03/28 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
Android面试题及答案
2015/09/04 面试题
自荐信的格式
2014/03/10 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
慰问信格式规范
2015/03/23 职场文书
农村党支部承诺书
2015/04/30 职场文书
校园安全学习心得体会
2016/01/18 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
深入理解Pytorch微调torchvision模型
2021/11/11 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript