vuejs全局运行机制

行文介绍

本文通过一张流程图来简要的分析 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…