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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
js实现简单抽奖功能
Nov 24 Javascript
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
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
详解python运行三种方式
2019/05/13 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
实习计划书范文
2015/01/16 职场文书
2016春节家属慰问信
2015/03/25 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
工程项目合作意向书
2015/05/08 职场文书
我的中国梦主题班会
2015/08/14 职场文书
环保建议书作文300字
2015/09/14 职场文书