首页
首页
BOT
沸点
课程
直播
活动
AI刷题
NEW
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
Vue2源码剥丝抽茧系列
windliang
创建于2022-09-04
订阅专栏
将Vue2的每一个点抽出来,详细讲解,并且都写相应的demo进行测试
等 1 人订阅
共25篇文章
创建于2022-09-04
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
Vue2剥丝抽茧-响应式系统完善
接 Vue2剥丝抽茧-响应式系统、Vue2剥丝抽茧-响应式系统之分支切换,Vue2剥丝抽茧-响应式系统之嵌套,还没有看过的同学需要看一下。 这篇文章主要修之前代码存在的一个问题,废话不多说,上代码!
从零手写 Vue 之响应式系统
「本文已参与低调务实优秀中国好青年社群的写作活动」。 之前的文章把响应式系统基本讲完了,没看过的同学可以看一下 vue.windliang.wang/。这篇文章主要是按照 Vue2 源码的目录格式和调
Vue2剥丝抽茧-虚拟 dom 简介
「本文已参与低调务实优秀中国好青年社群的写作活动」。 从零手写 Vue之响应式系统 中我们通过响应式系统实现了视图的自动更新,但遗留了一个问题是当数据变化的时候我们是将原来的 dom 全部删除,然后重
Vue2剥丝抽茧-虚拟 dom 之移动
虚拟 dom 之更新 中我们假设了 dom 的结构没有发生变化,完成了 dom 属性和内容的更新。这篇文章,我们假设 dom 没有出现增减,只是发生了移动,看一下这种情况下的更新情况。 dom 结构
Vue2剥丝抽茧-虚拟 dom 之移动优化
虚拟 dom 之移动 中我们介绍了一个简单的虚拟 dom diff 的算法,这篇文章主要介绍一下对它的优化。 场景 考虑下边的场景: 按照 虚拟 dom 之移动 中的算法,遍历 newVnode
Vue2剥丝抽茧-虚拟dom之自定义组件
虚拟dom 中我们按照 vue 本身的目录接口进行了整理,通过 render 函数返回虚拟 dom 最终完成页面的渲染。这篇文章,我们来实现自定义组件。 整体思路 我们需要完成三件事情: 生成自定义组
Vue2剥丝抽茧-响应式系统之computed
Vue2 源码从零详解系列文章, 还没有看过的同学可能需要看一下之前的,vue.windliang.wang/ 场景 Vue 中肯定少不了 computed 属性的使用,computed 的最大的作用
Vue2剥丝抽茧-模版编译之分词
通过前边 响应式系统 和 虚拟 dom,我们已经可以通过 render 函数 渲染为真实的 dom 。 模版编译的作用就是将字符串模版: 转为我们之前使用的 render 函数。 我们需要做的是词法分
Vue2剥丝抽茧-响应式系统之深度响应
接 Vue2剥丝抽茧-响应式系统、Vue2剥丝抽茧-响应式系统之分支切换,Vue2剥丝抽茧-响应式系统之嵌套,还没有看过的同学需要看一下。 我们的响应式系统到现在还没有支持属性是对象时候的响应
Vue2剥丝抽茧-响应式系统之数组2
Vue2 源码从零详解系列文章, 还没有看过的同学可能需要看一下之前的,vue.windliang.wang/ 场景1 先思考 1 分钟,上边会输出什么。 ... ... 是的,只会输出一次 hell
Vue2剥丝抽茧-虚拟 dom 之增删
虚拟 dom 之移动优化 中介绍了虚拟 dom 的双端 diff 的算法,但是没有考虑当虚拟 dom 增加或者减少的情况,这篇文章介绍增删 dom 在各个场景下的的代码完善。 循环未找到 虚拟 dom
从零手写Vue之虚拟dom
前边的文章介绍了虚拟 dom ,没看过的同学可以推荐可以到 vue.windliang.wang/ 看一下。这篇文章主要是按照 Vue2 源码的目录格式和调用过程,把我们之前写的虚拟 dom 代码位置
Vue2剥丝抽茧-模版编译之生成AST
上篇文章 模版编译之分词 中当解析出开始标签、结束标签或者文本的时候都会调用相应的回调函数,这篇文章就来实现回调函数,生成 AST 。 AST 结构 AST 即抽象语法树,在 虚拟dom、eslint
Vue2剥丝抽茧-模版编译之静态render
上篇文章 模版编译之生成AST 中将模版转为了 AST ,这篇文章会将 AST 转为最终的 render 函数。 静态节点 模版编译之生成AST 中我们转换的例子是 "<div><span>3<5吗<
Vue2剥丝抽茧-响应式系统之watch
Vue2 源码从零详解系列文章, 还没有看过的同学可能需要看一下之前的,vue.windliang.wang/ 场景 相信大家在 Vue 中一定写过 watch ,用来监听 data 中的数据变化,回
Vue2剥丝抽茧-响应式系统
目前工作中大概有 40% 的需求是在用 Vue2 的技术栈,所谓知其然更要知其所以然,为了更好的使用 Vue 、更快的排查问题,最近准备总结一下 Vue 源码相关。
Vue2剥丝抽茧-响应式系统之分支切换
接上篇:Vue2剥丝抽茧-响应式系统 ,没看的同学需要先看一下。 场景 我们考虑一下下边的代码会输出什么。 我们来一步一步理清: observer(data) 拦截了 data 中 text 和 ok
Vue2剥丝抽茧-响应式系统之嵌套
接 [Vue2剥丝抽茧-响应式系统](https://juejin.cn/post/7080336049481711646、[Vue2剥丝抽茧-响应式系统之分支切换](https://juejin.c
Vue2剥丝抽茧-响应式系统之数组
接 Vue2剥丝抽茧-响应式系统、Vue2剥丝抽茧-响应式系统之分支切换,Vue2剥丝抽茧-响应式系统之嵌套,Vue2剥丝抽茧-响应式系统之深度响应 还没有看过的同学需要看一下。
Vue2剥丝抽茧-响应式系统之set和delete
Vue2 源码从零详解系列文章, 还没有看过的同学可能需要看一下之前的,vue.windliang.wang/ 数组set list[0] 会触发 updateComponent 的重新执行吗? 可以
下一页