actived生命周期_初探 Vue 生命周期和钩子函数
生命周期
生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数。
简单来说就是好像把人的出生到死亡分成一个个阶段,你取名字肯定是在你出生阶段,而不是在成年阶段;你结婚肯定是在成年阶段,而不是在出生阶段;如果说你在出生阶段想去阶段,那肯定是不行的。
组件也是一样,在实例化的时特定阶段调用特定方法,调用的这个方法就是钩子函数。
钩子函数
钩子函数和回调函数有什么区别吗?
它们区别是:
js派函数监听事件 => 监听函数就是所谓的钩子函数 => 函数钩取事件:函数主动找事件 => 钩子函数
js预留函数给dom事件,dom事件调用js预留的函数 => 事件派发给函数:事件调用函数 => 回调函数
打个比方:
钩子函数:一个房间里的监控摄像头监控着每一个进入的人的面部特征,识别出了符合条件的人就触发警告(执行函数事件);
回调函数:可以看做是在一片地区埋了许许多多的地雷,一旦踩中了某个地雷(触发事件),地雷就会爆炸(执行函数事件)。
可以简单的理解为:
钩子函数是事件被动的监听,一旦条件触发就执行
回调函数是主动事件,执行函数体内容
生命周期探究
export default {
name: 'HelloWorld',
data () {
return {
msg: 'hello world',
msg1: ''
}
},
beforeCreate () {
console.groupCollapsed('beforeCreate 创建前状态')
console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
console.log(this.$data)
console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
console.groupEnd()
},
created () {
console.groupCollapsed('created 创建前状态')
console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
console.log(this.$data.msg)
console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
console.groupEnd()
},
beforeMount () {
console.groupCollapsed('beforeMount 挂载前状态')
console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
console.log(this.$data.msg)
console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
console.groupEnd()
},
mounted () {
console.groupCollapsed('mounted 挂载后状态')
console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
console.log(this.$data.msg)
console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
console.groupEnd()
setTimeout(() => {
this.$data.msg = '123'
}, 5000)
},
activated () {
console.groupCollapsed('activated 挂载后状态')
console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
console.log(this.$data.msg)
console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
console.groupEnd()
setTimeout(() => {
this.$data.msg = 'hello tiantian'
}, 10000)
},
beforeUpdate () {
console.groupCollapsed('beforeUpdate 更新前状态')
console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
console.log(document.getElementById('app').innerHTML)
console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
console.groupEnd()
},
updated () {
console.groupCollapsed('updated 更新后状态')
console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
console.log(document.getElementById('app').innerHTML)
console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
console.groupEnd()
setTimeout(() => {
this.$destroy()
}, 5000)
},
beforeDestroy () {
console.groupCollapsed('beforeDestroy 实例销毁前状态')
console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
console.log(document.getElementById('app').innerHTML)
console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
console.groupEnd()
},
destroyed () {
console.groupCollapsed('destroyed 实例销毁后状态')
console.log('%c%s', 'color:MediumVioletRed', 'el : ' + this.$el)
console.log(this.$el)
console.log('%c%s', 'color:MediumVioletRed', 'data : ' + this.$data)
console.log(document.getElementById('app').innerHTML)
console.log('%c%s', 'color:MediumVioletRed', 'msg: ' + this.msg)
console.groupEnd()
}
}
beforeCreate和created
beforeCreate:在实例初始化完成时,被执行
created:在初始化结束之后会再初始化一些外部注入和一些双向绑定相关的事情时,被执行
这两个钩子函数执行完之后,初始化基本完成了。
在beforeCreate阶段,el和data都没有被挂载;而在created阶段,el还没被挂在,但data已经被挂载了,如下图所示:
这里el为啥没有被挂载呢?
看上图,在created执行完毕后,它会询问一个条件:你这个Vue实例里是否有el这个选项。
如果有就又会询问是否有template这个选项:
如果没有template就会走右侧的分支,
如果这个实例没有template,就会将el这个根节点当做模版,来进行渲染
如果有template就会走左侧的分支
把template作为模版去渲染
beforeMount和mounted
beforeMount:执行时,页面还没有被渲染
mounted:执行时,页面已经被渲染了
从图中也可以看出,在beforeMount执行时,el还没有被挂在;当mounted执行时,el被挂载到页面了。
beforeUpdate和updated
beforeUpdate:数据被改变,还没渲染之前会被执行
updated:数据被改变,渲染完成后会被执行
这张图中有个奇怪的现象,为什么在beforeUpdate和updated两个钩子函数中,el和msg都是一样呢?beforeUpdate执行是不应该是老数据嘛,怎么这里也是最新的数据了?
因为这里的el是虚拟dom,不是真实的dom,和data都是对象,在加上console.log这里是个异步操作,当你点开console.log时,其实代码早就跑完了,数据已经是最新的了,所以就会看到在这两个函数中输出结果是一样的了。
可以用document.getElementById('app').innerHTML获取真实的Dom结构,这时我们就可以看到这两处不一样的地方了。
beforeDestroy和destroyed
调用vm.$destroy()方法可对实例销毁
beforeDestroy:实例被销毁前被执行
destroyed:实例被销毁后被执行
activated和deactivated
使用keep-alive标签后,会有两个生命周期函数分别是:activated、deactivated
activated:页面展示的时候被执行
deactivated:页面被隐藏或者页面即将被替换成新的页面时被执行
总结
created:挂载之前需要做的一些事情可以在放在这里面,比如页面加载时loading动画
mounted:向后端发请求,可以放在这个函数中。
这两个钩子函数使用时机重叠部分很多,反正是怎么方便怎么来就是了。
参考资源
actived生命周期_初探 Vue 生命周期和钩子函数相关推荐
- Vue的钩子函数是什么意思?Vue都有哪些钩子函数?
Vue的钩子函数是什么意思?Vue都有哪些钩子函数? Vue钩子函数就是指在一个Vue实例从创建到销毁的过程自动执行的函数. beforeCreate:在Vue实例创建之前执行. Created:在V ...
- vue动画过渡 javascript钩子函数详解
vue动画过渡js钩子函数详解 前言 js钩子函数运行时间 js钩子函数的过渡或动画 总结 结语 前言 转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...
- 初探 Vue 生命周期和钩子函数
生命周期 生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数. 简单来说就是好像把人的出生到死亡分成一个个阶段,你取名字肯定是在你出生阶段,而不是在成年阶段:你结婚肯定是在成年阶段,而不是在 ...
- Vue3 _ 11. Vue 生命周期 生命周期狗子
我们在学习 Servlet 的时候有说过 Servlet 的生命周期,其实 Vue 也是有生命周期的.伴随着生命周期,还有很多的钩子,钩子就是在某个阶段给你一个做某些处理的机会. 一.生命周期介绍 1 ...
- Vue生命周期函数是什么?Vue生命周期函数有什么用? ∠( °ω°)/ 前端知识
文章目录 生命周期函数简介 创建期间 beforeCreate created beforeMount mounted 运行期间 beforeUpdate updated 销毁期间 beforeDes ...
- python自相关函数提取基音周期_自相关函数法基音周期提取(matlab版)
1.引言 人在发浊音时,气流通过声门使声带产生张弛振荡式振动,产生一股准周期脉冲气流,这一气流激励声道就产生浊音,又称有声语音,它携带着语音中的大部分能量.这种声带振动的频率称为基频,相应的周期就称为 ...
- vue组件级路由钩子函数介绍,及实际应用
正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子 你可以使用 rout ...
- python 进程生命周期_计算客户生命周期价值的python解决方案
python 进程生命周期 By Lisa Cohen, Zhining Deng, Shijing Fang, and Ron Sielinski 由丽莎·科恩,志宁邓,石井方和罗恩Sielinsk ...
- vue 组件中的钩子函数 不能直接写this
export default {data(){return {num: 18}},beforeRouteEnter(to, from, next){next(vm=>{vm.num=19;})} ...
- vue的hook(钩子函数)
1.ref: ref定义响应式的数据 2.reactive定义一个对象类型的响应式数据(基本类型别用它 用ref) ref函数这个响应式是怎么设计的? ref将变量变成了一个对象,将数据存在对象的va ...
最新文章
- 各bert 模型下载
- Shuffle 相关
- Python3 格式化输出 %s %d 等
- MySQL修改字段的排列位置
- 开源爬虫larbin分析
- 查找算法:斐波那契查找算法实现及分析
- 二进制文件和ASCII文件有何差别
- m3u8 video ios h5_移动端H5页面踩坑记
- linux佳入门教程,命令行基础工具的更佳替代品
- 空窗2年,中文系萌妹拿下39W测试岗,还和面试官约上了烧烤?!
- 微信红包软件可测试,微信抢红包神器测试g2020
- python实列pdf下载_Python程序实例解析.pdf
- python中line是什么意思_python 中循环 line for line in file(filename)什么意思?
- PDF怎么转换成JPG图片?教你如何快速转换
- Python自动化办公练习——合并工作簿
- 深度学习常用显卡比较
- 微信小程序:uni-app页面Page和组件Component生命周期执行的先后顺序
- 增值电信业务经营许可证在怎么申请 办理攻略在这里
- 云凤蝶可视化搭建的推导与实现 - SEE Conf
- FastQC使用与结果详细解读
热门文章
- 肿瘤放射物理学(一)计量学中的辐射剂量及其单位
- 网络虚拟化中的 offload 技术:LSO/LRO、GSO/GRO、TSO/UFO、RSS、VXLAN
- 中国手机沉浮录:告别青铜时代
- iOS12捷径最全整理(100多个捷径),包括抖音视频下载捷径,地图导航捷径等
- win10计算机丢失msvcr,Win10计算机丢失MSVCR120.dll怎么解决
- 计算机应用技术要学java吗,计算机应用技术专业主要学什么
- 4选1数据选择器程序及testbench文件,给出仿真波形,分析
- 用计算机能算重量加权平均长度吗,利用计算器求平均数检测试题与*
- linux电视第三方软件安装,三星TV只需几个简单的步骤即可安装第三方TV软件教程!...
- ubuntu下听ape音乐