VUE源码浅读

首先我们要知道vue代码如何运行的？

【初始化及挂载】=>【编译】（parse-optimize-generate）=>【render function渲染】（响应式）=>【Virtual DOM】=>【更新视图】

初始化及挂载

在new了vue之后，Vue会调用_init函数进行（全局）初始化。初始化生命周期、事件、props、methods、data、computed、watch等。其中最重要的是通过Object.defineProperty设置setter和getter函数，用来实现【响应式】和【依赖收集】。

响应式系统

响应式系统的依赖收集追踪原理

【订阅】 & 【观察者】模式：订阅者Dep —— 存放Watcher对象 （->其实这可以说成是一个“消息管理中心”）

我们在闭包中增加了一个Dep类的对象，用来收集Watcher对象。在对象被“读”的时候，会触发Getter，把当前Watcher对象（存放在Dep.target中）收集到Dep类中去；之后“写”的时候，触发Setter，通知类Dep调用notify来触发所有Watcher的update更新对应视图。

初始化后调用 $mount 挂载组件

编译

parse ：用正则等方法解析templete模板中的指令、class、style等数据，形成AST（抽象语法树——源代码的抽象语法结构的树状表现形式）
optimize ：主要为了标记static节点。这是vue的一处优化——后面当update更新界面时，会有一个 patch 的过程，diff算法会直接跳过静态节点，从而减少了比较的过程，优化了patch的性能
generate ：将AST转化为 render function 字符串的过程。得到 render & staticRenderFns 字符串

Virtual DOM

前面说 render function 会转化为VNode节点。而Virtual DOM其实是一棵以JavaScript对象为基础的树。用对象属性描述节点。它实际上只是一层对真是DOM的抽象。
正是由于Virtual DOM是以JavaScript对象为基础而不依赖平台环境。所以使他拥有了跨平台的能力。

我们大概已知晓Vue是如何在我们修改data后修改视图了：这其实是一个 setter - Dep - Watcher - patch - 视图 的过程