在这之前，偶尔的会去阅读Vue相关知识点的源码，比如看到一些面试：“nextTick的原理是什么？” ，或者是：“请说一下响应式的实现原理”，或者在开发中遇到了棘手的bug（耽误我下班啦），也就不得不去找资料 or 阅读相关源码啦，以上等等情况.... 大家也是不是跟我差不多？…

在上一篇专栏讲到订阅者的响应是先把订阅者添加到一个队列，然后再 nextTick 函数中去遍历这个队列，对每个订阅者进行响应处理。大家所熟悉的 Vue API Vue.nextTick 全局方法和 vm.$nextTick 实例方法的内部都是调用 nextTick 函数，该函数…

在深入$nextTick原理之前，我们需要先来简单了解下浏览器的事件循环机制。 我们都知道，JavaScript是单线程的，也就是说，JavaScript在执行代码的时候，只有一个主线程来处理所有的任务。 那么要怎么处理异步代码（如I/O操作）呢？那就是我们即将要说的事件循环机…

本篇文章由阅读《Vue.js应用测试》书籍、学习《Vue Test Utils》官网知识以及实际工作经验总结而来，阅读书籍请支持正版。 前端应用程序主要编写三种测试类型：单元测试、快照测试、端到端测试。本篇文章着重介绍Vue组件的单元测试和快照测试，对于端到端测试请自行搜索相关…

也就是说它会等待DOM更新完成后再去触发回调函数执行，下面结合使用场景来进一步理解。 根据输出值的顺序，可以发现在created()钩子函数执行时DOM并没有进行渲染，此时要是操作DOM并没有任何作用，而如果created里使用了nextTick后是可以获取到DOM对象的。由于…

目前版本单元测试相关情况 vue-next-coverage。 Vue 的核心之一就是响应式系统，通过侦测数据的变化，来驱动更新视图。 通过可响应对象，实现对数据的侦测，从而告知外界数据变化。实现可响应对象的方式： API 本身存在较多问题。 Vue2.x 中，实现数据的可响应…