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

原文链接:segmentfault.com

上一篇:babel-plugin-turbo-name
下一篇:在Vue中使用icon 字体图标

相关推荐

官方社区

扫码加入 JavaScript 社区