流程分析：
1. 先进行初始化及挂载：init以及mount
2. 再进行模板编译：compile，编译成渲染函数render function，参考链接：渲染函数&jsx
3. 再进行响应式依赖收集：render function => getter、setter => Watcher 进行update => patch 的过程以及使用队列来异步更新的策略。
5. 依赖收集的同时生产Virtual DOM：render function 被转化成 VNode 节点
6. 通过diff算法后进行patch更新视图
第一步：初始化及挂载
在 new Vue() 之后，Vue会调用_init内部方法进行初始化。他会初始化，生命周期，事件，props，methods、 data、 computed 与 watch 等。
其中最重要的部分就是Object.defineProperty设置setter 与 getter 函数用来实现「响应式」以及「依赖收集」
第二步：编译
Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数 最终返回一个VNode(VNode就是Vue的虚拟DOM节点)
compile编译可以分成 parse、optimize 与 generate 三个阶段，最终需要得到 render function。
第三步：响应式
在init的时候通过Object.defineProperty 进行了绑定，它使的被设置的对象读取的时候触发getter方法，赋值的时候触发setter方法。
当 render function 被渲染的时候，因为会获取所需的值，所以会触发getter函数进行依赖收集
依赖收集的目的是将观察者watcher对象存放到当前闭包的订阅者dep的subs中，从而生成如下关系
修改对象值得时候会触发对应的setter ， setter会通知之前的依赖收集得到的dep中每一个watcher，告诉它们自己的值改变了需要重新渲染视图。
这个时候watcher就开始调用update来更新视图，这中间还有patch和队列异步更新的策略。
第四步：Virtual DOM
render function阶段的时候template会被转化成VNode节点，Virtual DOM其实就是一个以JavaScript对象作为基础的树（VNode节点）,其中用对象的属性来描述各个节点。实际上它就是一个对真实DOM的一种抽象，最后在通过各种操作将这个对象渲染到真实环境上。
由于Virtual DOM 是以js对象为基础的而不依赖于真实环境的所以他具有很好的跨平台性质。

[JavaScript] 纯文本查看 复制代码

{
    tag: 'div',                 /*说明这是一个div标签*/
    children: [                 /*存放该标签的子节点*/
        {
            tag: 'a',           /*说明这是一个a标签*/
            text: 'click me'    /*标签的内容*/
        }
    ]
}

渲染后就可以得到

[XHTML] 纯文本查看 复制代码

<div>
    <a>click me</a>
</div>

第五步：更新视图
修改一个对象的值得时候流程是 setter -> watcher -> update 的流程来精选修改的
更新视图的时候 ， 当数据发生变化的时候 执行render function就可以得到一个新的VNode节点。
接下来就是patch阶段，他会将新的数据和久的数据放到patch中去，然后进行diff算法，求出他们的差异值，最后只针对那一部分差异值做出修改。

流程分析：
1. 先进行初始化及挂载：init以及mount
2. 再进行模板编译：compile，编译成渲染函数render function，参考链接：渲染函数&jsx
3. 再进行响应式依赖收集：render function => getter、setter => Watcher 进行update => patch 的过程以及使用队列来异步更新的策略。
5. 依赖收集的同时生产Virtual DOM：render function 被转化成 VNode 节点
6. 通过diff算法后进行patch更新视图
第一步：初始化及挂载
在 new Vue() 之后，Vue会调用_init内部方法进行初始化。他会初始化，生命周期，事件，props，methods、 data、 computed 与 watch 等。
其中最重要的部分就是Object.defineProperty设置setter 与 getter 函数用来实现「响应式」以及「依赖收集」
第二步：编译
Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数 最终返回一个VNode(VNode就是Vue的虚拟DOM节点)
compile编译可以分成 parse、optimize 与 generate 三个阶段，最终需要得到 render function。
第三步：响应式
在init的时候通过Object.defineProperty 进行了绑定，它使的被设置的对象读取的时候触发getter方法，赋值的时候触发setter方法。
当 render function 被渲染的时候，因为会获取所需的值，所以会触发getter函数进行依赖收集
依赖收集的目的是将观察者watcher对象存放到当前闭包的订阅者dep的subs中，从而生成如下关系
修改对象值得时候会触发对应的setter ， setter会通知之前的依赖收集得到的dep中每一个watcher，告诉它们自己的值改变了需要重新渲染视图。
这个时候watcher就开始调用update来更新视图，这中间还有patch和队列异步更新的策略。
第四步：Virtual DOM
render function阶段的时候template会被转化成VNode节点，Virtual DOM其实就是一个以JavaScript对象作为基础的树（VNode节点）,其中用对象的属性来描述各个节点。实际上它就是一个对真实DOM的一种抽象，最后在通过各种操作将这个对象渲染到真实环境上。
由于Virtual DOM 是以js对象为基础的而不依赖于真实环境的所以他具有很好的跨平台性质。

[JavaScript] 纯文本查看 复制代码

{
    tag: 'div',                 /*说明这是一个div标签*/
    children: [                 /*存放该标签的子节点*/
        {
            tag: 'a',           /*说明这是一个a标签*/
            text: 'click me'    /*标签的内容*/
        }
    ]
}

渲染后就可以得到

[XHTML] 纯文本查看 复制代码

<div>
    <a>click me</a>
</div>

第五步：更新视图
修改一个对象的值得时候流程是 setter -> watcher -> update 的流程来精选修改的
更新视图的时候 ， 当数据发生变化的时候 执行render function就可以得到一个新的VNode节点。
接下来就是patch阶段，他会将新的数据和久的数据放到patch中去，然后进行diff算法，求出他们的差异值，最后只针对那一部分差异值做出修改。