资讯专栏INFORMATION COLUMN

vue2源码框架和流程分析

tain335 / 1485人阅读

摘要:流程图盗用一下官网关于生命周期的图,对照之前的内容梳理一下对照上面的分析基本上可以找到各个钩子函数的位置,下面那个销毁的我就没用做分析了。。。

vue整体框架和主要流程分析

之前对看过比较多关于vue源码的文章,但是对于整体框架和流程还是有些模糊,最后用chrome debug对vue的源码进行查看整理出这篇文章。。。。

本文对vue的整体框架和整体流程进行简要的分析,不对某些具体的细节进行分析,所有需要对vue有初步的认识,包括对Object.defineProperty、虚拟DOM有一定了解,本文不会对Object.defineProperty、虚拟DOM的原理和细节进行分析。
vue大体可以分两个部分:

1.采用Object.defineProperty进行数据的双向绑定;

2.采用虚拟DOM技术进行视图渲染;

vue入口



vue构造函数调用了this._init(options)方法,这个方法在initMixin中,如上图所示,进入initMixin


initMixin主要完成数据的初始化和视图的初始化:

1.数据初始化主要是数据的observe,在上图的initState中进行;

2.视图的初始化在vm.$mount(vm.$options.el),其中vm为Vue的实例,watcher的设置也是在vm.$mount(vm.$options.el)中完成的;

我们可以看到这里定义了beforeCreated和created这两个钩子函数。

数据初始化

接着上面我们看看数据初始化都做了什么,进入initState


这里我们主要对数据进行操作的是initData,传入的是vm,我们来具体看看initData:


我们先忽略前面的一些逻辑判断,主要看两个地方:

1.数据代理,主要是将_data的数据代理到vm上,这样的话可以直接对vm上的数据进行修改;

2.数据observe,传入data;

我们先看看vue怎么对数据进行observe的,进入observe


在observe里返回的是ob,也就是Observer类的实例,我们看看Observer类是怎么定义的,进入Observer类


如上图在对data进行observe时对数组进行了特殊的处理,这块我们先不看,先看一般情况下的处理,即调用this.walk(value)


walk主要对data的属性进行遍历,进入defineReactive


可以看到Object.defineProperty是在这里对属性设置get和set的,其中get主要进行依赖收集,其实就是在收集视图渲染的watcher,后面会提到,set主要是数据更新时进行视图的更新

至此,数据的初始化就完成了,从上面的分析来看,数据的初始化主要的工作就是对数据进行observe。

视图挂载

接着上面,在vue入口那里,我们知道视图的挂载主要是调用了vm.$mount(vm.$options.el)


如图,所以我们进入vm.$mount,看看里面都干了啥,在源码里面有两处地方涉及到$mount


这是第一处,就是return mountComponent




这是第二处,上面两个图是一起的,屏幕大小有限,所以截了两个图。。。

咱们看看第二处,里面做了一个处理,就是将template编译成render函数,在vue的教程里有render函数的使用,这里我们可以看出我们在组件里定义render函数会比定义template快,因为在定义template的组件挂载时多了一步将template编译成render函数;

第二处的return 还是调用了第一处,所以我们看看第一处调用的mountComponent方法,进入mountComponent




上面两个图是一起的,屏幕大小有限,所以截了两个图。。。

这里我们可以看到定义了两个钩子beforeMount和mount,中间调用了watcher,我们看一下这里watcher的定义,这里标注的不太好,挡住了。。。我们看看watcher的这行代码:

vm._watcher=new Watcher(vm,updateComponent,noop)

我们可以看到Watcher类主要传入了vm,updateComponent,noop三个参数,其中updateComponent的主要作用是将虚拟DOM转化为真实的DOM并进行挂载,具体的细节下面在讨论,我们下面看看Watcher类是怎么定义的,进入Watcher


这里我们注意两个地方,一个是this.getter的定义,这里就是上面传进来的updateComponent,还有就是执行this.get(),我们进入这个get方法


这里我们看到首先收集的依赖是当前watcher实例,然后调用getter方法也就是updateComponent方法,之前我们对updateComponent方法的作用进行了简单的说明,这里我们具体看看updateComponent都干了啥,进入updateComponent:


这里调用了vm._update方法,其中传入的参数有vm._render(),_render函数主要的作用是产生虚拟DOM,进入_update


这里主要是将虚拟DOM转化为真实DOM并进行挂载,分两种情况,分别是有旧的虚拟DOM和无旧的虚拟DOM,对应初始化时调用还是数据更新时调用,这里定义了一个钩子beforeUpdate

到这里,视图的初始化和挂载也结束了,下面看看数据变化时视图是如何更新的

数据变化时视图更新过程

接着上面我们看看数据变化时视图是怎么变化的,在数据初始化的时候,我们知道数据变化时将触发set方法,如下图:


上图可以看出,set最后调用了dep.notify,进入notify


如上图,notify主要将收集的依赖,也就是收集的所有watcher,调用所有watcher的update方法,我们看看watcher的updata方法干了啥


这里就是调用了queueWatcher,进入queueWatcher


这里采用队列异步更新,就是讲=将watcher push进队列queue中,然后执行nextTick方法,进入nextTick




上面两个图是一起的,屏幕大小有限,所以截了两个图。。。

这个部分有点难看,cb为传入的flushSchedulerQueue函数,执行timerFunc,将nextTickHander加入异步队列,执行nextTickHander,执行cb,既执行flushSchedulerQueue,进入flushSchedulerQueue




上面两个图是一起的,屏幕大小有限,所以截了两个图。。。

主要看watcher.run(),进入watcher.run


执行了this.get(),即进入前面数据渲染和挂载的地方

到这里,vue整个的执行流程基本就结束了。

vue流程图

盗用一下vue官网关于vue生命周期的图,对照之前的内容梳理一下:



对照上面的分析基本上可以找到各个钩子函数的位置,下面那个销毁的我就没用做分析了。。。

大家有兴趣的话可以关注一下我的博客

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84501.html

相关文章

  • 前方来报,八月最新资讯--关于vue2&3的最佳文章推荐

    摘要:哪吒别人的看法都是狗屁,你是谁只有你自己说了才算,这是爹教我的道理。哪吒去他个鸟命我命由我,不由天是魔是仙,我自己决定哪吒白白搭上一条人命,你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运,我不晓得。我只晓得,不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...

    izhuhaodev 评论0 收藏0
  • 大前端 - 收藏集 - 掘金

    摘要:是目前唯一一个支持同步调用的跨平台年度上最多的个项目前端掘金年接近尾声,在最近的几篇文章中,会整理总结一些年度开源项目。 JS 全栈教程 - 前端 - 掘金本课程是基于阮一峰的 js 全栈教程的视频版本,免费供大家观看... 2016 年 10 个最佳的 CodePen 作品 - 前端 - 掘金说到 CodePen,前端开发者们肯定不会陌生。如果说 Dribbble 是设计师们聚集的圣...

    honhon 评论0 收藏0
  • 基于Vue2全家桶的移动端AppDEMO实现

    好久没更新过Vue的小文章,上次做了一个基于Vue+Mint-ui的移动端AppDemo,集成了推送功能,然后通过cordova打包生成apk,移动端表现还不错,今天把这个小东西分享出来,希望有更多的小伙伴能够用Vue去做一些有意思的东西,本人才疏学浅,有说的不对的地方,还请大家多多指教。下面按照惯例放上demo地址和源码地址,希望大家能给我点下star:Demo(进去需要先注册才能登录,用的lo...

    Jiavan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<