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...