行文介绍

本文通过一张流程图来简要的分析vue的【初始化，模板编译，数据响应式，数据驱动视图】的流程。

目的是理清思路。想看详情的请看文末参考链接，或者查找其他文档，因为每一块的内容都是很多的。

流程图

搭配

本文可以搭配我写的 从new Vue()看源码流程 食用。这篇文章主要是从源码来梳理流程。

流程分析

1. 初始化以及挂载init, mount
2. 在进行模板编译compile，将template编译为渲染函数render function
3. 执行render function生成Virtual DOM, render function => VNode tree
4. 再进行响应式依赖收集，render function => getter, setter => Watcher.update => patch。以及使用队列进行异步更新的策略。
5. 通过diff算法后进行patch更新视图

问题

问题来源

有这个问题是因为受这篇神文的影响剖析Vue原理&实现双向绑定MVVM。它这里面是精确收集的watcher，数据更新时直接更新指定的dom内容，非常高效。但是vue源码中并没有类似的实现。

数据变化时是【触发精确watcher，直接更新指定DOM】，还是【触发render watcher, 然后走patch流程】？

答案是【触发render watcher, 然后走patch流程】。

而且在源码中打断点，也可以发现，当改变一个data时是会触发render watcher的。

vue中有三种watcher

1. render Watcher
2. computed Watcher
3. watch Watcher

不信的，请vue源码中搜索 new Watcher即可发现只有三处。(目前vue@2.6.10， 以后的版本不敢保证)

参考链接

https://www.kancloud.cn/hanxu…