个人 理解 Vue.js 生命周期

70 阅读4分钟

我正在参加「掘金·启航计划」

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还没有挂载到页面上

      ( 比如 你有个

{{ message }}
如果你写一个获取msg 的innerHTML这个时候得到的并不是 data 里面 message的数值,而是{{message}}  )

    mounted 此时,内存中的DOM挂载到了页面上,标志着创建过程结束

 


************简单来说,beforeMount 和 mounted 的区别就是 数据 是不是套入了页面

*********\


 

    mounted 标志着 创建过程的结束,基本的创建过程就告一段落

 

———————————————————————————————————————————————————————————


运 行

    这一过程,其实是和data挂钩的,理解起来很容易

 

    

 

 


**

 

    注意的是

    beforeUpdate 与 updated 关注的都是data 数据被修改的那一时刻后的操作

beforeUpdate 此时,data 修改,但是页面还没有相应修改的 data

updated 此时,data 修改,页面也相应了修改后的 data

     

 

    总的来说,就是共同点是 data 已经被修改了

    但是beforeUpdate 还没有进行页面更新 所以得到的还是旧页面,但是数据已经进行了更新

    updated 进行了页面更新 ,是新页面 ( 数据更新才会发生页面更新的嘛 )

———————————————————————————————————————————————————————————

  销 毁

     销毁其实最简单,就是数据要没了,和数据真的没了

    

 

beforeDestroy 此时,还可以苟延残喘,数据都还在

destroyed 此时,什么都没了