Vue源码解析12-patch中的diff算法 发表于 2018-11-10 | 上篇文章说到了patch中的新增dom过程，这篇会说diif算法。Vue的diff算法是基于snabbdom的，另外网上也有很多分析的文章，我自己是看的掘金上的篇博客。 在这里我主要会从代码实现上来描述。 入口在patch函数中，如果新旧 vnode 属于sameVnode，那么就会执行patchV ... 阅读全文 »
Vue源码解析11-patch创建dom 发表于 2018-11-10 | 上篇文章了解了patch的入口，这篇文章的目的是了解patch函数功能的一部分：创建 DOM。patch的功能大致分为 3 块： 有oldVnode无vnode，调用oldVnode的destroy流程 无oldVnode有vnode，调用创建dom流程 有oldVnode有vnode，调用dif ... 阅读全文 »
Vue源码解析10-patch函数入口 发表于 2018-11-04 | 前面简单介绍了compile的最后一步：生成render函数，还剩下很多分支细节没说，主要是各种内置指令以及自定义组件和slot，这些结合之后的patch过程说效果会好一些。 这篇文章主要是介绍patch函数的入口，把patch过程当做黑盒子，从整体的角度讲patch的作用。 patch 入口在生成 ... 阅读全文 »
Vue源码解析9-children归一化 发表于 2018-11-04 | 归一化操作其实就是将多维的数组，合并转换成一个一维的数组。在 Vue 中归一化分为三个级别， 0：不需要进行归一化 1：只需要简单的归一化处理，将数组打平一层 2：完全归一化，将一个 N 层的 children 完全打平为一维数组 归一化的代码位于src/core/vdom/create-ele ... 阅读全文 »
Vue源码解析8-render函数生成vnode 发表于 2018-11-04 | 前面说到模板编译完会生成一个render函数，这篇文章要讲的是如何根据render函数生成对应的vnode。入口代码位于src/core/instance/render.js的Vue.prototype._render： 1vnode = render.call(vm._renderProxy, v ... 阅读全文 »
