Vue2.0源码学习-生命周期

     人有生老病死,月有阴晴圆缺,万物都有其生存规律。vue也有一套从创建到销毁的流程,每个阶段会触发一个钩子函数。普通的vue组件会经过:创建->挂载->更新->销毁的生命周期流程,通过vue源码分析每个阶段都做了哪些任务。

1,创建阶段

    创建阶段有beforCreate,created两个生命构子,我们从源码中分析创建阶段做了哪些工作。从core/instance/index.js文件中找到vue实例化的构造函数

     从这个文件可以看到在VUE构造函数中可以看到Vue必须使用new关键字实例化,然后调用_init方法。_init方法在initMixin方法定义,然后挂载到Vue构造函数原型上。Vue构造函数下面的5个**Mixin方法都是对Vue构造函数进行一系列初始化,通过方法名大概也能猜到他们的功能,这里关注initMixin方法,因为创建阶段的方法是这里执行的。

由于initMixin方法太长,我分段讲解。


_init_1

initMixin方法首先在Vue原型上挂载_init方法,this指向的是调用_init方法的实例,每个实例都有一个唯一标示_uid。

_init_2

这一步合并构造函数中传来的options对象

_init_3

这里是重点,可以直观的看到调用beforeCreate和created构子函数的时机。

beforeCreate前

initLifecycle:把当前实例放到父实例的$children里,设置父实例$parent,设置$root,初始化$children,$refs,_watcher,_inactive等。

initEvents:定义在events.js文件中,定义_events对象,_events表示的是父组件绑定在当前组件上的事件。

initRender:主要实现两部分功能1,将children VNode转换成slots对象  2,将$attrs$listeners设置成可监听的

created前

initInjections:该方法在初始化data/props之前被调用,主要作用是初始化vue实例的inject。

initState:初始化props,methods,data,computed,watch。初始化computed时会对每个computed属性创建一个computedWatcher。

initProvide:初始化vm._provied对象,如是函数则改变provide方向的this指向,否则返回provide本身

然后执行created构子


_init_4

如果设置了el,执行挂载方法。

2、挂载阶段

vue初始化之后,可以挂载到DOM树中,如图_init_4所示是调用$mount方法完成的。


$mount

可以看到$mount挂载到Vue的prototype上面,返回mountComponent方法。mountComponent在lifecycle.js中定义,下面分析一下这个方法做的哪些工作。

beforeMount前

1,设置vm.$el=el

2,设置vm.$options.render

3,调用beforeMount

mounted前

1,创建vm实例的Render观察者,把updateComponent传入watcher作为getter,在watcher初始化过程中,会执行getter,也就是会执行updateComponent,


render-watcher



updateComponent

其中_update方法是定义在lifecycleMixin方法中,是个VUE原型方法。这里的功能就是把vm._render()得到的vnode patch到真实DOM树中。


lifecycleMixin

2,设置_isMounted=true

beforeUpdate

在上面的render-watcher代码可以看到挂载的时候,会new一个watcher,watcher执行更新前,执行更新构子,这个功能在scheduler.js的flushSchedulerQueue中调用。


flushSchedulerQueue

因为watcher更新时是在放在更新队列中异步更新的,异步更新时遍历列新队列触发beforUpdate函数。

updated

在当前组件Dom已完成更新,调用此构子函数。在scheduler.js中实现


callupdateHooks

每个watcher执行update更新时会把自身放到更新队列中。如同一个事件循环周期,触发多次更新,只会把watcher放入一次,也就是说同一个watcher所对应的属性同时多次赋值,DOM只更新一次且是异步更新。


watcher-update
queueWatcher

has[id]不为空的话,则不执行添加队列的操作。添加watcher到更新队列后,异步执行flushSchedulerQueue函数。


queueWatcher

与beforeUpdate构子函数同在flushSchedulerQueue函数中执行,这里才是真正执行更新DOM的地方。


flushSchedulerQueue

遍历执行watcher.run方法,更新DOM


flushSchedulerQueue

执行完所有的watcher.run,调用callUpdateHooks方法,执行每个vm的updated构子函数。


callUpdatedHooks

beforeDestroy

当调用vm.$destroy方法时,组件进入销毁阶段。

首先调用beforeDestroy构子函数,这个函数里还未真正执行销毁操作,可以读取VUE实例相关信息,但是修改数据不能更新DOM。原因也是很简单,因为更新DOM是异步的,接着destroy方法执行后面的销毁工作。

后面以以下步骤执行, 1,设置_isBeingDestroyed=true  2,从父结点把自已删除 3,删除render-watcher/清理dep依赖 4,清理vm下所有watcher及dep依赖,5,执行__patch__调用销毁钩子,销毁所有子组件


销毁钩子

destroyed

关闭所有实例监听,移除__vue__引用,释放vm.$vnode.parent

整个生命周期解读完毕,有不正确的地方欢迎指正。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容