
【一轮重构中】手写 Vue2 源码
文章平均质量分 91
剖析框架核心实现,拆碎知识点,便于学习理解;初版共计 45 篇,每日更新 2 篇,每篇文章持续迭代优化;目标:2023 年通过 3 轮重构达到付费标准,帮助更多人在最短时间了解底层原理,快速成为 Vue 高手;目前免费欢迎大家订阅、斧正,一起进步;
BraveWangDev
11年开发经验、全栈工程师;2023年更新计划已确定,希望能与大家共同进步;
展开
-
【手写 Vue2.x 源码】专栏目录与重构规划
专栏概览与目录;写作回顾、重构规划、重构过程记录与问题汇总;持续更新中...原创 2023-01-17 10:58:06 · 969 阅读 · 1 评论 -
【手写 Vue2.x 源码】第四十三篇 - 组件部分 - 组件相关流程总结
上篇,介绍了《组件部分-组件挂载流程简述》;响应式数据原理(第一篇 ~ 第十篇)模板编译原理(第十一篇 ~ 第二十篇)依赖收集、异步更新、生命周期(第二十一篇 ~ 第二十七篇)diff 算法原理(第二十八篇 ~ 第三十三篇)组件部分(第三十四篇 ~ 第四十二篇)响应式数据原理部分:写的有些乱,顺序上还需要再做调整,好在事情讲清楚了;模板编译原理部分:部分内容仍需要再细化,要把流程讲清楚,让人一看就懂;diff 算法部分:还需要添加一些必要图示和动画,这部分不难,但做好不容易;原创 2023-01-25 00:35:54 · 564 阅读 · 0 评论 -
【手写 Vue2.x 源码】第四十二篇 - 组件部分 - 组件挂载流程简述
上篇,组件部分-生成组件的真实节点;本篇,组件部分-组件挂载流程分析;原创 2023-01-24 20:31:56 · 1225 阅读 · 0 评论 -
【手写 Vue2.x 源码】第四十一篇 - 组件部分 - 生成组件的真实节点
上篇,介绍了组件部分-组件的生命周期,主要涉及以下几部分:本篇,组件部分-生成组件的真实节点;原创 2023-01-24 10:33:15 · 975 阅读 · 0 评论 -
【手写 Vue2.x 源码】temp第四十篇 - 组件部分 - 组件的生命周期
本篇,组件部分-组件的生命周期;原创 2023-01-23 13:38:42 · 666 阅读 · 0 评论 -
【手写 Vue2.x 源码】第三十九篇 - 组件部分 - 组件的生命周期
本篇,介绍了组件部分-组件的生命周期,主要涉及以下几部分:1)介绍了组件生命周期的实现;2)介绍了如何进行组件的初始化和挂载;原创 2023-01-23 13:36:41 · 682 阅读 · 0 评论 -
【手写 Vue2.x 源码】第三十八篇 - 组件部分 - 创建组件虚拟节点
本篇,介绍了组件部分-组件的编译,主要涉及以下几部分:1,对组件初始化流程、模板解析流程进行回顾;2,组件的编译流程分析;2-1,组件html模板 -> AST语法树 -> render函数 -> 组件vnode;3,扩展 createElement 方法,创建组件虚拟节点;3-1,判断 tag 是组件 or 元素;3-2,获取 Vue.extend 方法,创建组件构造函数;3-3,扩展 vnode 结构,支持组件选项 componentOptions;3-4,扩展组件选项 componentOption;原创 2023-01-22 12:20:10 · 1094 阅读 · 0 评论 -
【手写 Vue2.x 源码】第三十七篇 - 组件部分 - 组件合并的实现
本篇,介绍了组件部分-组件合并的实现,主要涉及以下几个点:1,组件注册流程梳理;2,组件合并的分析;2-1,组件合并的必要性;2-2,组件合并的问题;3,组件合并的实现;3-1,生命周期的合并策略-策略模式回顾;3-2,组件合并策略的实现;4,组件合并的测试;原创 2023-01-22 09:03:22 · 1153 阅读 · 0 评论 -
【手写 Vue2.x 源码】第三十六篇 - 组件部分 - Vue.extend 实现
本篇,介绍了 Vue.extend 实现,主要涉及以下几个点:1,Vue.extend 简介;2,Vue.extend 实现的分析与代码框架;3,组件初始化的分析与实现;4,子类继承父类的分析与实现;5,Vue.extend 的功能测试;6,组件的选项合并;7,Vue.extend 的补充说明;原创 2023-01-21 16:00:10 · 1291 阅读 · 0 评论 -
【手写 Vue2.x 源码】第三十五篇 - 组件部分 - Vue.component 实现
本篇,主要介绍了 Vue 初始化流程中的 Vue.component 实现:1,Vue.component 全局 API 的初始化处理;2,Vue.component 的定义和参数说明;3,组件构造函数全局存储的方式和作用;原创 2023-01-21 15:58:48 · 888 阅读 · 0 评论 -
【手写 Vue2.x 源码】第三十四篇 - 组件部分 - Vue组件与初始化流程简介
本篇,介绍了 Vue 组件与初始化流程,涉及以下几部分:1,组件使用介绍:组件定义和优先级;2,组件初始化流程介绍:Vue.component、Vue.extend、保存组件构造函数、组件合并、初渲染和更新;原创 2023-01-20 21:41:14 · 935 阅读 · 0 评论 -
【手写 Vue2.x 源码】第三十三篇 - diff算法-收尾+阶段性总结
本篇,diff算法阶段性梳理,主要涉及以下几个点:1,初渲染与视图更新流程;2,diff 算法的外层更新;3,diff 算法的比对优化;4,diff 算法的乱序比对;5,初渲染和更新渲染判断;原创 2023-01-20 21:39:46 · 874 阅读 · 0 评论 -
【手写 Vue2.x 源码】第三十二篇 - diff算法-乱序比对
本篇,diff 算法-乱序比对,主要涉及以下几个点:1,介绍了乱序比对的方案;2,介绍了乱序比对的过程分析;3,实现了乱序比对的代码逻辑;原创 2023-01-19 13:52:50 · 1667 阅读 · 0 评论 -
【手写 Vue2.x 源码】第三十一篇 - diff 算法 - 比对优化(下)
本篇,diff算法-比对优化(下),主要涉及以下几个点:1,介绍了儿子节点比较的流程;2,介绍并实现了头头、尾尾、头尾、尾头4种特殊情况比对;原创 2023-01-19 13:49:43 · 1910 阅读 · 0 评论 -
【手写 Vue2.x 源码】第三十篇 - diff 算法 - 比对优化(上)
本篇,diff算法-比对优化(上),主要涉及以下几个点:1,介绍了如何进行儿子节点比对;2,新老儿子节点可能存在的3种情况及代码实现;3,新老节点都有儿子时,diff 的方案介绍与处理逻辑分析;原创 2023-01-18 19:20:48 · 1003 阅读 · 0 评论 -
【手写 Vue2.x 源码】第二十九篇 - diff 算法 - 节点比对
本篇,介绍了diff算法-节点比对,主要涉及以下几点:1,介绍了 diff 算法、对比方式、节点复用;2,实现了外层节点的 diff 算法;3,不同节点如何做替换更新;4,相同节点如何做复用更新:文本、元素、样式处理;原创 2023-01-18 19:18:53 · 1777 阅读 · 0 评论 -
【手写 Vue2.x 源码】第二十八篇 - diff 算法-问题分析与 patch 优化
本篇,diff算法问题分析与patch方法改造,主要涉及以下几点:1,初始化与更新流程分析;2,问题分析与优化思路;3,新老虚拟节点比对模拟;4,patch 方法改造;原创 2023-01-17 11:00:54 · 875 阅读 · 4 评论 -
【手写 Vue2.x 源码】第二十七篇 - Vue 生命周期的实现
本篇,介绍了 Vue 生命周期的实现,主要涉及以下几点:1,Vue.mixin 介绍和使用;2,Vue 全局 api 和实例 api 的使用和实现;3,Vue.mixin 的说明和实现;4,生命周期的说明和实现;原创 2023-01-16 11:03:44 · 638 阅读 · 0 评论 -
【手写 Vue2.x 源码】第二十六篇 - 数组依赖收集的实现
本篇,主要介绍了数组依赖收集的实现:1,对象依赖收集的总结;2,数组依赖收集的位置;3,数组和对象本身做依赖收集;4,数组中嵌套对象(对象或数组)的递归处理;原创 2023-01-16 11:00:40 · 852 阅读 · 0 评论 -
【手写 Vue2.x 源码】第二十五篇 - 数组依赖收集的原理
本篇,主要介绍了数组依赖收集的原理:1,数组的响应式实现;2,数组的依赖收集方案介绍;3,数组依赖收集的入口;4,添加 dep 后,对象的收益;原创 2023-01-15 20:54:53 · 473 阅读 · 0 评论 -
【手写 Vue2.x 源码】第二十四篇 - 异步更新流程
本篇,主要介绍了 Vue 的异步更新流程,主要涉及以下几点:1,为什要做异步更新;2,异步更新的实现思路;3,数据变更缓存的位置;4,缓存 watcher 更新逻辑;5,vm.$nextTick 获取更新后的 dom;6,测试异步更新;原创 2023-01-15 20:53:15 · 558 阅读 · 0 评论 -
【手写 Vue2.x 源码】第二十三篇 - 依赖收集 - 视图更新部分
本篇,介绍了 Vue依赖收集的视图更新部分,主要涉及以下几点:视图初始化时:1,render方法中会进行取值操作,进入 Object.defineProperty 的 get 方法;2,get 方法中为数据添加 dep,并记录当前的渲染 watcher;3,记录方式:watcher查重并记住 dep,dep 再记住 watcher;数据更新时:1,当数据发生改,会进入 Object.defineProperty 的 set 方法;2,在 set 方法中,使 dep 中收集的全部 watcher 执行视图渲染原创 2023-01-14 21:52:42 · 837 阅读 · 0 评论 -
【手写 Vue2.x 源码】第二十二篇 - dep 和 watcher 关联
本篇, dep 和 watcher 关联;1,介绍了依赖收集的必要性;2,介绍了 Watcher 和 Dep 的作用;3,实现了 Watcher 类和 Dep 类;4,Watcher 和 Dep 如何产生关联;原创 2023-01-14 21:43:27 · 1131 阅读 · 0 评论 -
【手写 Vue2.x 源码】第二十一篇 - 依赖收集的过程分析
本篇,主要介绍了 Vue 依赖收集的过程分析:1,介绍了 Vue 的响应式特性;2,介绍了 Vue 的依赖收集过程;3,介绍了 dep 和 watcher 以及观察者模式;原创 2023-01-13 17:02:31 · 829 阅读 · 0 评论 -
【手写 Vue2.x 源码】第二十篇 - 使用真实节点替换原始节点
本篇,使用真实节点替换原始节点,主要涉及以下几点:1,新老节点的更新方案;2,虚拟节点与真实节点映射;3,实现新老节点的替换;原创 2023-01-13 09:07:04 · 752 阅读 · 0 评论 -
【手写 Vue2.x 源码】第十九篇 - 根据 vnode 创建真实节点
本篇,根据 vnode 虚拟节点创建真实节点,主要涉及以下几点:1,vnode 渲染真实节点的步骤;2,Vue 原型方法 _update 的扩展;3,patch 方法中的两个步骤:1)创建真实节点;2)替换掉老节点;4,createElm实现:根据虚拟节点创建真实节点;原创 2023-01-12 17:08:57 · 1075 阅读 · 0 评论 -
【手写 Vue2.x 源码】第十八篇 - 根据 render 函数,生成 vnode
本篇,根据 render 函数,生成 vnode,主要涉及一下几点:1,封装 vm._render 返回虚拟节点;2,_s,_v,_c的实现;原创 2023-01-12 17:07:02 · 1250 阅读 · 0 评论 -
【手写 Vue2.x 源码】第十七篇 - 生成 render 函数 - 函数生成
本篇,生成 render 函数 - 函数生成,主要做了以下两件事:1,使用 with 对生成的 code 进行一次包装;2,将包装后的完整 code 字符串,通过 new Function 输出为 render 函数;原创 2023-01-11 09:30:21 · 489 阅读 · 0 评论 -
【手写 Vue2.x 源码】第十六篇 - 生成 render 函数 - 代码拼接
本篇,主要介绍了生成 render 函数 - 代码拼接:1,render 函数的分析和实现方案;2,拼接 render 函数结构:generate(ast);3,处理属性及属性值中的样式:genProps(ast.attrs);4,递归处理儿子:genChildren(el);5,对文本和变量进行包装处理,详细分析文本处理流程;原创 2023-01-11 09:28:04 · 544 阅读 · 0 评论 -
【手写 Vue2.x 源码】第十五篇 - 生成 ast 语法树 - 构造树形结构
本篇,生成 ast 语法树 - 构造树形结构部分:1,基于 html 特点,使用栈型数据结构记录父子关系;2,分析开始标签,结束标签及文本的ast构建逻辑和代码实现;3,重构 html 解析与 ast 语法树构建部分代码;4,对 ast 语法树构建的过程分析;原创 2023-01-10 10:13:23 · 650 阅读 · 0 评论 -
【手写 Vue2.x 源码】第十四篇 - 生成 ast 语法树 - 模板解析
本篇,主要介绍了生成 ast 语法树 - 模板解析部分,主要涉及以下几个点:使用正则对 html 模板进行解析和处理,匹配到模板中的标签和属性:1,解析开始标签-parseStartTag方法;2,截取匹配完成的部分-advance方法;3,解析开始标签中的属性-while循环;4,开始标签处理过程的详细说明;5,对开始标签、结束标签及文本的发射处理;原创 2023-01-10 10:11:39 · 580 阅读 · 1 评论 -
【手写 Vue2.x 源码】第十三篇 - 生成 ast 语法树 - 正则说明
本篇,主要介绍了生成 ast 语法树-正则说明部分,涉及以下几个点:1,介绍了html模板的解析原理;2,详解源码中模板解析相关的7类正则;1)匹配标签名;2)匹配命名空间标签名;3)匹配开始标签-开始部分4)匹配结束标签;5)匹配属性;6)匹配开始标签-闭合部分;7)匹配插值表达式;原创 2023-01-09 10:35:40 · 851 阅读 · 2 评论 -
【手写 Vue2.x 源码】第十二篇 - 生成 ast 语法树-流程说明
本篇,主要介绍了生成 ast 语法树 - 流程说明,涉及以下几个点:1,Vue 核心渲染流程回顾;2,三种模板写法及优先级;3,两种数据挂载方式;4,Vue 的原型方法 $mount;5,compileToFunction -> parserHTM流程说明;原创 2023-01-09 10:33:53 · 604 阅读 · 0 评论 -
【手写 Vue2.x 源码】第十一篇 - Vue 的数据渲染流程
本篇,主要介绍了 vue 数据渲染的核心流程,初渲染与更新渲染:1,通过`template`模板,生成`ast`语法树;2,根据`ast`语法树,生成`render`函数;3,根据`render`函数,生成`vnode`虚拟节点;4,根据`vnode`虚拟节点,创建真实节点;5,使用真实节点替换原始节点;原创 2023-01-08 15:00:37 · 776 阅读 · 0 评论 -
【手写 Vue2.x 源码】第十篇 - 数组数据变化的观测情况
第十篇 - 数组数据变化的观测情况;实现了数组数据变化被劫持后,已重写原型方法的具体逻辑;数组各种数据变化时的观测情况分析;至此,数据劫持就全部完成了原创 2023-01-08 14:58:36 · 638 阅读 · 0 评论 -
【手写 Vue2.x 源码】第九篇 - 对象数据变化的观测情况
第九篇-对象数据变化的观测情况;实现了对象老属性值变更为对象、数组时的深层观测处理;结合实现原理,说明了对象新增属性不能被观测的原因,及如何实现数据观测;原创 2023-01-07 10:50:03 · 1067 阅读 · 1 评论 -
【手写 Vue2.x 源码】第八篇 - 数组的深层劫持
第八篇 - 数组的深层劫持;数组深层观测的实现;对数组进行 observe 递归观测操作;实现数组中嵌套结构的劫持,即数组嵌套数组、数组嵌套对象;原创 2023-01-07 10:49:06 · 888 阅读 · 0 评论 -
【手写 Vue2.x 源码】第七篇 - 阶段性梳理
第七篇 - 阶段性梳理;通过断点调试,对当前版本数据劫持、数据代理进行了简单的流程梳理;同时,对照 Vue2.x 提供的功能,分析了当前版本数据观测的问题和不足;原创 2023-01-06 11:41:54 · 731 阅读 · 0 评论 -
【手写 Vue2.x 源码】第六篇 - 数据代理的实现
第六篇 - 数据代理的实现;data暴露到vm._data 实例属性上;利用Object.defineProperty将vm.xxx操作代理到vm._data上;原创 2023-01-06 11:13:50 · 564 阅读 · 0 评论 -
【手写 Vue2.x 源码】第五篇 - 数组的劫持
第五篇 - 数组的劫持;出于对性能的考虑,Vue 没有对数组类型的数据使用 Object.defineProperty 进行递归劫持,而是通过对能够导致原数组变化的 7 个方法进行拦截和重写实现了数据劫持;原创 2023-01-05 17:10:47 · 1673 阅读 · 5 评论