vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted

本人近日做前端的后台管理系统项目，一个问题一直都没解决，就是页面中查看详情按钮第一次点击进去详情页可以被渲染，回退出来第二次进去钩子函数没有被执行，网上这类问题的解决方法并不多，一直以来都没解决，今天终于解决，特来记录下。

解决方法：

activated 可以使用这个钩子函数

以下为具体分析：

html 部分

js 部分

.....

created: function () {

console.log(1)

mounted: function () {

console.log(2)

activated: function () {

console.log(3)

deactivated: function () {

console.log(4)

}

.....

什么阶段获取数据

页面生命周期钩子如上面的代码所示，这四个是最常用到的部分。这部分需要注意下，当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入(前进或者后退)时，只触发activated。

我们知道 keep-alive 之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。

vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted相关推荐

nignx部署Vue单页面刷新路由404问题解决
nignx部署Vue单页面刷新路由404问题解决参考文章: (1)nignx部署Vue单页面刷新路由404问题解决 (2)https://www.cnblogs.com/wuchenggong/p/ ...
vue.js页面刷新出现闪烁问题的解决
vue.js页面刷新出现闪烁问题的解决参考文章: (1)vue.js页面刷新出现闪烁问题的解决 (2)https://www.cnblogs.com/wnsry/p/9132398.html 备忘一 ...
dom vue 加载完执行_前端面试题——Vue
前言前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articl ...
dom vue 加载完执行_前端面试题Vue
前言前几天整理了一些 html + css + JavaScript 常见的面试题,然后现在也是找了一些在 Vue 方面经常出现的面试题,留给自己查看消化,也分享给有需要的小伙伴. 如果文章中有出现 ...
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程文章目录总结Vue中index.html.main.js.App.vue.index ...
Vue 单页面应用把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办???(比如登陆页面)
<div class="all" v-if="$route.path!=='/login'" > Vue 单页面应用把公共组件放在 app.v ...
vue所有页面刷新一次mounted(以及所有生命周期函数)执行两次的解决方法
刚开始我发现页面每刷新一次,接口都请求两次,我以为是因为axios发送OPTIONS预检请求,但是我发现两次请求都是正常的get或者是post请求,并且只有在页面刷新的时候请求才触发两次,点击查询或者 ...
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据, 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经 ...
vue全局变量页面刷新时数据丢失问题
页面刷新后vue全局变量数据丢失在开发中,我们需要将一些数据存到全局变量中,如用户的用户名等,便于页面展示,保存从服务器发送请求返回的数据,以避免在不同组件发送相同请求时,重复请求服务器. 方法一: ...

vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted

vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted相关推荐

最新文章

热门文章