Vue

背景 在前端项目中，有多个 Vue 页面存在长列表的场景，因此都使用了一个包：vue-virtual-scroll-list。 有一天因为有新页面需要考虑长列表的问题，正好看到这个包有 2.x 的版本

<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 include - 字符串或正…

针对初次渲染，patch 函数是做了特殊逻辑的。显然我们只要把初次执行的 patch 的逻辑走一遍就清楚了👇 也就是对「非 dom 元素的相同节点」做一次 patchVnode 的操作。关于这段代码可以分成几点来分析： 由于执行 patchVnode 的前提就是新老节点是「相…

扫描下方的二维码或搜索「tony老师的前端补习班」关注我的微信公众号，那么就可以第一时间收到我的最新文章。

Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。请仔细看这行代码： createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需…

我们的意图是 —— 监测app这个变量，并在函数中打下一个断点。 我们期待的是 —— 断点停下后，调用栈中出现相关的函数，提供我们分析watch原理的依据。 ... 看到需要经过这么多的调用过程，不禁心里一慌... 然而，如果你理解了上一篇关于computed的文章，你很容易就…

详细：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例... 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新…

我们可以看到，父子组件的test方法中各打了一个debugger。 看完上面的代码我们知道，vm._events[event]拿到了一个方法，然后调用invokeWithErrorHandling。当然，vm._events[event]的方法应该是从template上拿到的，…

上面是我所知的一些阅读源码的常见方式，但是以上两种方式，无论是哪一种，都需要对flow稍微熟悉一些，不然看着多别扭（当然啦，如果你直接下载源码到本地转码以后慢慢看，那只能当我没说）；同时，从第一个commit开始看的话未免太消磨时间，相信在座的各位都不是很愿意。 通过观察右边的…