vue的生命周期理解

先用官网的图,这个是整体流程,本文记录整体流程中的细节描述

从最开始的流程往下分析整体

1. init events $ lifecycle(说明:初始化事件和生命周期)

    什么是事件?什么是生命周期?vue api文档中事件有(on、once、off、emit四个方法),生命周期有(mount、forceUpdate、nextTick、destroy四个方法,其他那么多生命周期钩子应该也在这初始化的,要不然下一步的beforeCreate是哪里来的)

2. beforeCreate(组件刚被创建,组建属性计算之前,如data属性等 执行的钩子函数)

    说白了这里给我们用户一个加入操作的入口,在这之前做了初始化事件和生命周期的事情,所以el现在还没初始化、data没有初始化,这也是有些人在这个方法里打印el、data都是undefined。

3.init injections & reactivity(通过依赖注入导入依赖项)

    理解这句首先需要知道什么是“依赖注入”,vue中有provide和inject,可以将父组件provide中的对象注入到子孙的属性中。这么说这个过程

    reactive,就是将数据包装成一种可观测的类型,当数据产生变更的时候,我们能够感知到。这个操作后data数据应该就可以是响应的了。

4. created

    在inject和reactive后再次给我们一次hook的机会;组件实例创建完成,属性已绑定,此时DOM还未生成 执行的钩子函数。

5. 检查vue配置,即new Vue{}里面的el项是否存在,有就继续检查template项。没有则等到手动绑定调用vm.$mount()

6. 检查配置中的template项,如果没有template进行填充被绑定区域,则被绑定区域的el对象的outerHTML(即整个#app DOM对象,包括<div id=”app” >和</div>标签)都作为被填充对象替换掉填充区域。

7. beforeMount

    模板编译、挂载之前执行的钩子函数;这里我有个疑问,这个钩子与create有什么区别,区别在于el属性已经创建完成,只是还没挂载到dom上。

8. create vm.$el and replace “el” with it

    编译,并替换了被绑定元素;说白了就是我们用的模板语法被真实的数据替换了比如html中的{{msg}}被替换了真实的数据。

9. mounted

    编译、挂载后执行的钩子函数

10. beforeUpdate

    组件更新之前执行的钩子函数;当vue发现data中的数据发生了改变,会触发对应组件的重新渲染,先后调用beforeUpdateupdated钩子函数。

11. update

   组件重新渲染后调用

最后还有两个destory

原文地址:https://www.cnblogs.com/caoyi/p/11356500.html