Vue 3.0 核心源码解析
文章平均质量分 83
非原创,真干货的Vue.js 3.0源码解析,欢迎大家拜读!
aiguangyuan
要全身心的投入,程序才会有些感觉!
展开
-
第五篇:组件更新:完整的 DOM diff 流程是怎样的?(下)
新子节点数组相对于旧子节点数组的变化,无非是通过更新、删除、添加和移动节点来完成,而核心 diff 算法,就是在已知旧子节点的 DOM 结构、vnode 和新子节点的 vnode 情况下,以较低的成本完成子节点的更新为目的,求解生成新子节点 DOM 的系列操作。原创 2024-03-06 17:01:24 · 949 阅读 · 0 评论 -
第四篇:组件更新:完整的 DOM diff 流程是怎样的?(上)
上一节课我们梳理了组件渲染的过程,本质上就是把各种类型的 vnode 渲染成真实 DOM。我们也知道了组件是由模板、组件描述对象和数据构成的,数据的变化会影响组件的变化。组件的渲染过程中创建了一个带副作用的渲染函数,当数据变化的时候就会执行这个渲染函数来触发组件的更新。那么接下来,我们就具体分析一下组件的更新过程。转载 2023-08-11 11:41:31 · 187 阅读 · 0 评论 -
第三篇:组件渲染:vnode 到真实 DOM 是如何转变的?
在 Vue.js 中,组件是一个非常重要的概念,整个应用的页面都是通过组件渲染来实现的,但是你知道当我们编写这些组件的时候,它的内部是如何工作的吗?从我们编写组件开始,到最终真实的 DOM 又是怎样的一个转变过程呢?这节课,我们将会学习 Vue.js 3.0 中的组件是如何渲染的,通过学习,你的这些问题将会迎刃而解。转载 2023-08-09 15:47:32 · 186 阅读 · 0 评论 -
第二篇:导读-组件的实现:直击 Vue 核心的实现
相信作为一个 Vue.js 的开发者,最熟悉的应该就是组件了,我们开发 Vue.js 的项目,大部分时间都是在写组件,组件系统是 Vue.js 的一个重要概念,它是一种对 DOM 结构的抽象,我们可以使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树。转载 2023-08-09 11:03:37 · 97 阅读 · 0 评论 -
第一篇:一文看懂 Vue.js 3.0 的优化
我们的课程是要解读 Vue.js 框架的源码,所以在进入课程之前我们先来了解一下 Vue.js 框架演进的过程,也就是 Vue.js 3.0 主要做了哪些优化。Vue.js 从 1.x 到 2.0 版本,最大的升级就是引入了虚拟 DOM 的概念,它为后续做服务端渲染以及跨端框架 Weex 提供了基础。Vue.js 2.x 发展了很久,现在周边的生态设施都已经非常完善了,而且对于 Vue.js 用户而言,它几乎满足了我们日常开发的所有需求。转载 2023-08-07 14:50:37 · 203 阅读 · 0 评论