Vue的整个实现流程

Vue的整个实现流程

经过几番考虑，还是把diff算法探究放到后面吧，毕竟有点难度，看得也不是特别懂！那咱今天就来先简述一下Vue的整个实现流程吧！

首先呢，就画了一张这样的图！

大致可以分为4个阶段

解析模板成render函数

响应式开始监听

首次渲染，显示页面，并且绑定相关的依赖

data属性变化时触发rerender

解析模板成render函数

从Vue2开始，这个阶段在编译打包的时候就已经完成了，从模板变成render函数，交由编译的工具完成，其原理还是大量运用正则解析字符串模板，得到指令，class等，形成AST。这部分涉及编译原理等一系列相关知识，有能力的小伙伴请参考（在此我就不做讨论啦）（ps:其实我也不是非常明白）《template 模板是怎样通过 Compile 编译的》

render函数

在这里，我想单独说明一下render函数构成，其中 用得非常巧妙，他把变量直接就全部挂载到了render函数上面。关说说，不是太明白，我们就去修改一下vue的源码，把编译的render函数弄出来看看吧！直接搜索 ，然后 打印出来，大概在1w多行吧（版本不同可能位置不同）

模板编译后的render函数如下

从这里我们就可以看到，通过 就把里面的 ， ， ， 等方法以及上面的属性全部挂载到了render函数上面，指向同一个 ，这样做的目的是待后面的响应式开始监听后，全部挂载到new Vue的实例对象上。vue里面的指令也都变为了JS的逻辑。render函数中 返回返回每一个节点的虚拟节点，render最终目的返回整个虚拟DOM(Virtual DOM Tree)

响应式

响应式就是要让我们从对象获得到数据的内容，以及我们对其修改增加属性进行侦听。能够让计算机知道，你获得了什么，你改变了什么！这一部分的核心是用到了ES5的 ，也正是Vue兼容性为IE9+的主要原因。 的具体用法可以参考MDN。这里也就简单模拟Vue实现一个响应式的过程

然后结果见下面data属性变化部分

重点在于 的 方法侦听设置属性以及 方法中侦听获得的属性。通过外部传递来的属性的变化，侦听得到并且触发 执行内容修改。在这里有人可能会想说那直接侦听 方法不就可以了嘛？实际上在Vue实际运行的过程中，需要渲染到页面的属性往往不会是全部的属性。如果直接用set的话，就把所有属性都挂载过来了，造成了一定的资源浪费。而通过 就可以提前知道页面中需要获取哪些属性，再把需要的属性进行挂载，这样做能节约不少资源。

初次渲染页面

第一次渲染的时候会直接执行 ，执行 会访问到vm上面，也就是Vue实例出来的属性，同时会被响应式的 方法监听到。这时候会到vdom的 方法， 会将其渲染为真实的DOM，并且保存当前的vdom。初次渲染完成。我们对源码做一点疯狂简化，便可以清晰的看明白这个过程啦

可以清楚看到，初次渲染，和HTML上的的 模板做对比，发现不同的地方就进行渲染，这里主要是针对服务端ssr渲染后，模板有内容的情况，当然没有内容就更好办了，那就全部渲染呗！

data属性变化

当然这里还是脱离不了之前响应式的内容，只不过这次侦听的是 方法，上面模仿Vue实现响应式的那部分，可以看到控制台的输出，以及结果如下图

当属性发生改变触发 时候，会马上再次执行 来重新执行 本次vnode与上次保存的vnode做对比，通过diff算法发现差异后，对不同的地方进行真实DOM的渲染，这部分源码同上（初次渲染）走else分支。

最后说两句

这次写的感觉还是很乱，不过各个重点部分中核心的内容凭着自己对vue的部分源码一点点理解，都有一点点说明，可能有误，欢迎指出！