Vue源码主体分析

vue的响应式和react的函数式编程思想是很不同的。

vue最基本的原理是对getter和setter的代理模式。以及观察者模式。

当数据发生变化时，通知观察者。

而watcher是通过触发数据的getter，成为观察者的。

vue的生命周期中，

在create阶段，vue创建了实例。

在mount 阶段，vue初始化了响应式（数据劫持）。

在update阶段，通过dom diff， vue可以做到对未改变的dom的复用。同一层的如果有设置key，diff得时候就不需要去一一对比，速度会更加快。

首先，vue是如何做到把template最后变成dom元素的呢？

1.通过正则处理template，生成ast之后，经过优化（静态标记），再生成字符串。

2.把字符串作为参数传给 new Function。生成render函数。

3.执行render函数，生成vnode，也就是虚拟dom.

4.patch，如果是在初始化过程中，就根据vnode直接创建dom，否则就进行dom diff。 

5.替换挂载dom节点。

（子组件其实是在父组件patch的时候才开始create的，但是最先完成patch）

（vue代码有不同作用域的同名函数。。createComponent）

当最内部的子组件__patch__完毕之后，，vue通过restore操作activeInstance（递归）创建了prent和children的引用关系。

至于组件slot的处理，是在执行render函数的过程中，用parse出来的children代替了<slot>

watcher分为3种，第一种是renderWatcher，就是实现dom响应式的主watcher，一种是computed watcher，加了缓存，如果数据不改变就用缓存的数据，另外一种就是用户的watch了。其中有immediate，deep等差异。

 

总之，就不贴具体代码啦