vue 页面回退mounted函数不执行的解决方案


Posted in Javascript onJuly 26, 2020

前言

最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑,编辑完再返回a页面,却没走a页面的钩子函数mounted,数据没有更新

经过一番面向百度研究,终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。

原理

其实这个问题主要涉及到vue生命周期,对vue生命周期理解不够深刻的同学可以去官网学习一下:https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

解决这个问题的关键就在于对keep-alive的理解和activated钩子函数的使用。

当在项目中引入keep-alive的时候,页面第一次进入,钩子函数的触发顺序created -> mounted -> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

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

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

html结构

vue 页面回退mounted函数不执行的解决方案

js部分--vue生命周期

beforeCreate () {


console.log('在实例初始化之前调用')

}

created () {


console.log('在实例初始化之后调用,经常用于操作数据,发起ajax请求')

}

beforeMount () {


console.log('在挂载开始之前被调用,如果是在服务器端渲染时不被调用;在这个函数里,无法获取元素')

}
 

mounted () {


console.log('在挂载后被调用,也不能在服务器端渲染时被调用;这个函数里,是可以获取元素,并进行操作的')

}

beforeUpdate () {


console.log('视图层数据更新前调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM')

}

updated () {


console.log('视图层数据更新后调用')

}

beforeDestroy () {


console.log('实例销毁之前调用,在被销毁的组件中进行调用;有一些操作,会在实例已经销毁的时候还在运行,这时候为了性能考虑,就在这里结束哪些操作')

}

destroyed () {


console.log('实例销毁后调用。')

}

activated和deactivated配合keep-alive标签使用!

activated () {
console.log('实例被激活时使用,用于重复激活一个实例的时候')
}
deactivated () {
console.log('实例没有被激活时')
}

总结

keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM;导致在组件mounted钩子中调用的刷新页面内容时,这个钩子没有被调用。

故:使用Vue组件切换过程,执行钩子activated(keep-alive组件激活时调用),而不是挂载钩子mounted。

补充知识:vue 子组件 created 方法不执行问题

近期做了一个项目 里面有一个树形菜单,将数据写在 js (死数据)中,所有的东西都能够正常执行(i 标签,子节点,父节点),但是当在请求接口文件或者请求后台数据的时候,发现引入的子组件的created方法不执行,但是点击父级菜单展开时还是能够触发,后来发现 是生命周期的问题,仔细查看一下,后来解决 解决方法如下:用watch 检测一下data的数据变化,created方法既然在点击的时候执行,所以也必须保留,好啦,就这样

以上这篇vue 页面回退mounted函数不执行的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
jquery 实现的全选和反选
Apr 15 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
JavaScript中继承原理与用法实例入门
May 09 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vuex分模块后,实现获取state的值
Jul 26 #Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 #Javascript
全面解析JavaScript Module模式
Jul 24 #Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 #Javascript
在Vuex中Mutations修改状态操作
Jul 24 #Javascript
Vue自动构建发布脚本的方法示例
Jul 24 #Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 #Javascript
You might like
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
javascript 函数速查表
2010/02/07 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python字符串切片操作知识详解
2016/03/28 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
后备干部推荐材料
2014/12/24 职场文书
担保书格式
2015/01/20 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS