随笔分类 - vue源码系列
摘要：写完这个就差不多了，准备干新项目了。 确实挺不擅长写东西，感觉都是罗列代码写点注释的感觉，这篇就简单阐述一下数据变动时DOM是如何更新的，主要讲解下其中的diff算法。 先来个正常的html模板： 页面上有一个通过v-for渲染的div，还有一个按钮，点击按钮时会让div数量+1。 首先需要提到的是
阅读全文
摘要：写起来感觉都是老三套，AST => render => VNode => patch 之前是把AST弄完了，对事件和过滤器处理如图： render函数也只看这两部分的转换吧！ 首先是el.events，该属性在genData中被处理，这个在之前讲过了！不过，前面没有modifiers，所以，这里可以
阅读全文
摘要：我是这样计划的，写完这个还写一篇数据变动时，VNode是如何更新的，顺便初探一下diff算法。 至于vue-router、vuex等插件源码，容我缓一波好吧，vue看的有点伤。 其实在之前讲其余内置指令有涉及到on事件绑定，这里再详细从头看一下事件绑定的正统流程吧！ 上html代码： 包含最常见的c
阅读全文
摘要：其实吧，写这些后记我才真正了解到vue源码的精髓，之前的跑源码跟闹着玩一样。 go！ 之前将AST转换成了render函数，跳出来后，由于仍是字符串，所以调用了makeFunction将其转换成了真正的函数： 这个没啥讲的 将render转换成VNode其实也没什么讲的，重点看一下之前没见过的函数，
阅读全文
摘要：…… 指令这个讲起来还有点复杂，先把html弄上来： 上一节是解析完了input标签的2个属性，并将其打包进了directives属性中返回。 接着会继续跑genData函数，如下： 由于在处理v-model的时候给el添加了props与events属性，所以之后会跑进两个处理函数。 首先看看gen
阅读全文
摘要：把其余的内置指令也搞完吧，来一个全家桶。 案例如下： 基本上内置指令都有，由于v-on涉及事件，也就是methods，这个后面再说，这里暂时只处理指令。另外添加了一个纯净的节点，可以跑一下ref和optimize。 跳过前面所有无聊的流程，直接进入parseHTML，切割方面也没什么看头，最外层di
阅读全文
摘要：这一节肯定能完！ 经过DOM字符串的AST转化，再通过render变成vnode，最后就剩下patch到页面上了。 render函数跑完应该是在这里： vm._render()会生成一个vnode看，接下来调用_update渲染页面，如下： 由于是初始化页面，所有在update的过程中，oldVNo
阅读全文
摘要：这一节争取搞完！ 回头来看看那个render代码，为了便于分析，做了更细致的注释； 所有的has拦截器之前分析过了，跳过，但是这里又多了一个特殊的访问，即items，但是Vue$3上并没有这个属性，属性在Vue$3._data上，如图：，那这是如何访问到的呢？ Vue在initState的时候自己又
阅读全文
摘要：钩子函数比较简单，没有什么意思，这一节搞点大事情 => 源码中v-for的渲染过程。 vue的内置指令包含了v-html、v-if、v-once、v-bind、v-on、v-show等，先从一个入手，其余的也就那么回事。 案例模板依照之前的，但是多加了一个v-for指令，如下所示： 为了保持DOM的
阅读全文
摘要：vue源码的马拉松跑完了，可以放松一下写点小东西，其实源码讲20节都讲不完，跳了好多地方。 本人技术有限，无法跟大神一样，模拟vue手把手搭建一个MVVM框架，然后再分析原理，只能以门外汉的姿态简单过一下~ 想到什么写什么了，这节就简单说说钩子函数吧！ vue中的钩子函数主要包含初始化的before
阅读全文
摘要：怎么感觉遥遥无期了呀~这个源码，跑不完了。 这个系列写的不好，仅作为一个记录，善始善终，反正也没人看，写着玩吧！ 接着上一节的cbs，这个对象在初始化应该只会调用create模块数组方法，简单回顾一下到哪了。 后面的暂时不去看，依次执行cbs.create中的方法： 一、updateAttrs 前面
阅读全文
摘要：快完事咯！ 简单看了下patch函数，虽然不长，但是实际上很长很长，慢慢来吧， 首先来个总览： 函数总共有6个形参，其中有3个为undefined，内部总共主要是条件判断，按照顺序跑下来。 一、 由于不是SSR，也没有hydrating这个参数，所以会直接创建一个空的虚拟DOM作为oldVnode，
阅读全文
摘要：最近太鸡儿忙了！鸽了一个多月，本来这个都快完了，拖到现在，结果我都不知道怎么写了。 接着上节的话，目前是这么个过程： 函数大概是这里： 然后，在上个月，我卡死在了render.call这个函数上面，因为所有vue实例被设置了proxy代理，所以会跳转到各种奇怪的检测函数中。 过了一个月，我依然看不懂
阅读全文
摘要：上一节最后再次调用了mount函数，我发现竟然跳到了7000多行的那个函数，之前我还说因为声明早了被覆盖，看来我错了！ 就是这个函数： 第一步query就不用看了，el此时是一个DOM节点，所以直接返回，然后调用了mountComponent函数。 这个函数做了三件事，调用beforeMount钩子
阅读全文
摘要：上节跑完了超长的parse函数: 返回一个ast对象，包括attrs、attrsList、attrsMap、children、plain、tag、type等属性，如图：。 包含了DOM字符串中节点类型、属性、文本内容，接下来进入优化函数：optimize。 首先函数会对静态属性进行缓存： 可以看到，
阅读全文
摘要：上一节讲完了超长的start函数，也同时完结了handleStartTag函数，接着continue进入下一轮while循环。 此时剩余的字符串状态如图：，切掉了<div id='app'>。 再次进入while循环时，发生了一些变化： 第一次进入while循环时，由于字符串以<开头，所以进入sta
阅读全文
摘要：上一节到了parseHTML函数，该函数接受一个字符串与一个对象，字符串即对应的DOM，对象包含几个字符串匹配集及3个长函数。 简略梳理部分函数代码如下： 函数比较长，除去开头的参数获取，后面直接用while循环开始对字符串进行切割。 在判断标签不是script,style,textarea三个特殊
阅读全文
摘要：上一节获取到了DOM树的字符串，准备进入compile阶段： 该函数接受两个参数，DOM树字符串、配置参数，如图：，进函数： compile主要做了3件事： 1、参数合并 这里涉及到baseOptions与传进来的options，baseOptions是内置对象，与options合并后得到final
阅读全文
摘要：讲完了数据劫持原理和一堆初始化 现在是DOM相关的代码了 上一节是从这个函数开始的： 弄完data属性的数据绑定后，开始处理el属性，也就是挂载的DOM节点，这里的vm.$options.el也就是传进去的'#app'字符串。 有一个值得注意的点是，源码中有2个$mount函数都是Vue$3的原型函
阅读全文
摘要：开播了开播了！ vue通过数据劫持来达到监听和操作DOM更新，上一节简述了数组变化是如何监听的，这一节先讲讲对象属性是如何劫持的。 上一节说到这里，现在进入defineReactive$$1来看看具体的劫持过程，函数比较长。 函数接受4个参数，分别为数据对象、键、值、默认设置，由于这里只传了3个，先
阅读全文
浙公网安备 33010602011771号