解决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包将字符串生成二维码图片
Sep 12 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 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扩展imagick
2014/06/02 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
Python的一些用法分享
2012/10/07 Python
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python制作词云的方法
2018/01/03 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
Python request中文乱码问题解决方案
2020/09/17 Python
Django URL参数Template反向解析
2020/11/24 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
2014年大学生四年规划书范文
2014/04/03 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
门面房租房协议书
2014/12/01 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
话题作文之财富(600字)
2019/12/03 职场文书