解决vue项目F5刷新mounted里的函数不执行问题
版权申诉
197 浏览量
2020-12-13
06:45:49
上传
评论
收藏 52KB PDF 举报
解决解决vue项目项目F5刷新刷新mounted里的函数不执行问题里的函数不执行问题
项目背景项目背景
在主文件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里的函数不执行问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希
望大家多多支持软件开发网。
资源评论
