我正在参加「掘金·启航计划」
1.钩子函数
在查阅资料后,我发现,其实Vue的生命周期其实就是钩子函数的生命周期,但是我对于 钩子函数 还是不清楚,所以
决定好好理解一下( 我是没有系统学习过js的,就变学Vue边补嘛 )
在说钩子函数的时候还是得提一下 回调函数 他俩相爱相杀 这里再系统认识一遍
网上的一些文章对于这些理解,我个人感觉并不是很通俗易懂,我来结合着根据自己的理解讲一下
那么来说一下这个东西把,
钩子函数,在触发了某个事件之后,立即执行
回调函数,在某个函数里面调用某个函数( 也不算调用 ) 只是作为参数( 函数地址 ) 使用
这个会更加好理解一下回调函数
直接复制粘贴这个代码
暂时,钩子函数就到这里,其实就是 给某个信息挂上 钩子( hook ) ,这个信息出现了,立马收杆( 执行操作 )
2.生命周期
为啥前面说了这么多呢,其实Vue的生命周期就是和 八个钩子( 函数 ) 挂钩,所以看到像了,简要回顾一下 ( 其实也不能说 就是 八个钩子函数 应该是钩子(函数) )
首先,把这八大函数给列出来
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
****注意了,请联系 英格丽习 来先看看这些函数,可能会好很多
比如 beforeCreate -> created 注意这个 **ed后缀 **
如果 **英格丽习 ** 有一定语感的朋友都知道 , ed表过去,或者是被动,这个例子里面( 过去完成时态里 ),表完成
**所以这里两两出成对现,创建之前,创建结束;挂载之前,挂载结束;更新之前,更新结束;销毁之前,销毁之后 ( 可能表述有问题,暂时看着玩 )
函数都成对出现,真的是瞧不起单身狗呗
到这,我们对这八大钩子函数( 生命周期 )有了一个感性的认识 其主要就是围绕
创建 、 挂载 、 更新 、 销毁
****按照一般的习惯有分为
创建 、运行 、 销毁 ( 创建 = 创建 + 挂载, 更新 = 运行 )
创 建
首先 创建这个部分是 beforeCreate 、 created 、 beforeMount 、 mounted 组成的
开始谈谈 前两个 即
beforeCreate 、 created
如果按照我的理解 简单来说是这样一个图
区分beforeCreate 和 created 的一个重要的地方 我觉得就是 data 、 methods 有没有被初始化出来
beforeCreate 此时 啥都没有 只是一些 ” 空壳 “
created 此时 有了 具体的 data 、methods
———————————————————————————————————————————————————————————
***这里连着created后面一部分一起说,其实后面这一坨( 在 beforemount 前) 其实就是把渲染好的html模板( {{ xxx }} 这种 )\
弄出来了,只不过没有放到页面那里,在内存里面,暂时还没有页面的改变,不是还没有挂载的嘛( mount )
* ———————————————————————————————————————————————————————————*
beforeMount 、 mounted
其实这里 ,上面的一个大坨 已经说明了,只要看下流程图,就知道
beforeMount 此时,内存中的DOM还没有挂载到页面上
( 比如 你有个
mounted 此时,内存中的DOM挂载到了页面上,标志着创建过程结束
************简单来说,beforeMount 和 mounted 的区别就是 数据 是不是套入了页面
*********\
mounted 标志着 创建过程的结束,基本的创建过程就告一段落
———————————————————————————————————————————————————————————
运 行
这一过程,其实是和data挂钩的,理解起来很容易
**
注意的是
beforeUpdate 与 updated 关注的都是data 数据被修改的那一时刻后的操作
beforeUpdate 此时,data 修改,但是页面还没有相应修改的 data
updated 此时,data 修改,页面也相应了修改后的 data
总的来说,就是共同点是 data 已经被修改了
但是,beforeUpdate 还没有进行页面更新 所以得到的还是旧页面,但是数据已经进行了更新
updated 进行了页面更新 ,是新页面 ( 数据更新才会发生页面更新的嘛 )
———————————————————————————————————————————————————————————
销 毁
销毁其实最简单,就是数据要没了,和数据真的没了
beforeDestroy 此时,还可以苟延残喘,数据都还在
destroyed 此时,什么都没了