当然，仅仅从上面这个例子我们也只能知道，Vue不允许动态添加根级响应式属性。这意味我们需要将使用到的变量先在data函数中声明。 😅显然，变量 b 并不是响应式的，这也就造成了二次赋值的时候，对应的 computed 并没有发生变化。接下来我们来深究下这其中的原因。 文档中提…

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

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

在上一篇Vue响应式原理-理解Observer、Dep、Watcher简单讲解了Observer、Dep、Watcher三者的关系。 今天我们就进一步了解Observer里还做了什么事。 data 中的数据如果是一个数组怎么办？我们发现Object.defineProperty…

本文内容讲解的内容：一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构。 2. Vue 全家桶 3. Vue 4. Vue-Router 5. Vuex 6. 已完成与待完成 因为该项目都是业余时间做的，笔者能力与时间也有限，很多细节还没有完善…

首先这篇文章是读 vue.js 源代码的梳理性文章，文章分块梳理，记录着自己的一些理解及大致过程；更重要的一点是希望在 vue.js 3.0 发布前深入的了解其原理。 如果你从未看过或者接触过 vue.js 源代码，建议你参考以下列出的 vue.js 解析的相关文章，因为这些文…

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

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

本篇文章是细谈 vue 系列的第三篇，这篇文章主要会介绍一下 vue 的内置组件 transition 。前几篇链接如下 自动嗅探目标元素是否使用了 CSS 过渡或动画，如果使用，会在合适的时机添加/移除 CSS 过渡 class。 如果过渡组件设置了 JavaScript 钩…