首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
Vue3 源码解读系列
james
创建于2023-09-09
订阅专栏
Vue3 源码解读系列
等 30 人订阅
共24篇文章
创建于2023-09-09
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
Vue3 源码解读之其他实现原理
1. 异步组件实现原理 使用文档 源码传送门 1.1 基本用法 使用： 实现： 1.2 异步组件超时处理 组件卸载的时候需要稍作处理 1.3 异步组件 loading 处理 1.4 异步组件加载重试处
Vue3源码解读之编译优化
前言 Vue 3 是一个结合了编译时和运行时的框架。在编译时，我们编写的模板代码会被转换为一个 render 函数，该函数的返回值是一个虚拟节点。而在运行时，核心工作就是将虚拟节点转换为真实节点，然后
Vue3源码解读之Vue3 渲染原理
Vue3源码解读 - Vue3 渲染原理 1. Vue3 自定义渲染器 自定义渲染器的作用是把虚拟 DOM渲染为特定平台上的真实元素。在浏览器中，渲染器会把虚拟 DOM 渲染成真实 DOM 元素。 官
Vue3源码解读之Vue3 整体架构
1.Vue3 架构介绍 1.1 Monorepo 管理项目 Monorepo 是管理项目代码的一个方式，指在一个项目仓库(repo)中管理多个模块/包(package)。 Vue3 源码采用 mono
Vue3 源码解读之副作用函数与依赖收集
1、副作用函数 副作用函数是指会产生副作用的函数，如下面的代码所示： 当 effect 函数执行时，它会设置 body 的文本内容，但除了 effect 函数之外的任何函数都可以读取或设置 body
Vue3 源码解读之 JavaScript AST 转换器
Vue3 源码解读之 JavaScript AST 转换器 JavaScript AST 转换器 transform 在编译器的编译过程中负责将 模板AST 转换为 JavaScript AST，如下
Vue3 源码解读之监听器watch的实现原理
watch 的本质 所谓的watch，其本质就是观测一个响应式数据，当数据发生变化时通知并执行相应的回调函数。实际上，watch 的实现本质就是利用了 effect 和 options.schedul
Vue3 源码解读之内置组件-Transition 组件
## Transition 组件的实现原理 `Vue 3` 内建的 `Transition` 组件可以为单个元素或单个组件添加过渡效果。它的核心实现原理如下： - 当 `DOM 元素`被**挂载*
Vue3 源码解读之内置组件-Teleport 组件
Teleport 组件解决的问题 如果要实现一个弹窗组件“蒙层” 的功能，并且该 “蒙层” 可以遮挡页面上的所有元素，通常情况下我们会选择直接在 <body> 标签下渲染 “蒙层” 内容。如果在 Vu
Vue3 源码解读之内置组件 - KeepAlive 组件
KeepAlive 组件的作用 Vue 内建的 KeepAlive 组件用于缓存组件，可以避免一个组件被频繁的销毁/重建。假设我们的页面中有一组 <Tab> 组件，如下面的代码所示： 从上面的模板中可
Vue3 源码解读之计算属性computed的实现原理
懒执行的 effect 通过在 effect 函数的 options 选项中添加 lazy 属性，可以实现一个懒执行的 effect，如下面的代码所示： 在 effect 函数源码中，当 option
Vue3 源码解读之非原始值的响应式原理
在上个章节《Vue3 源码解读之原始值的响应式原理》，我们讲了 Vue3 原始值的响应式原理，这节我们来看看非原始值的响应式原理 我们知道，Vue 3 中的响应式数据是基于 ES6 中的 Proxy
Vue3 源码解读之原始值的响应式原理
Vue3 源码解读之原始值的响应式原理 原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined 和 null 等类型的值。在 JavaScript 中
Vue3 源码解读之patch算法(二)
Vue3 源码解读之patch算法(二) 在《Vue3 源码解读之patch算法(一) 》一文中，我们对 patch 过程中的文本节点、注释节点、静态节点、Fragment节点、Element类型的节
Vue3 源码解读之patch算法(一)
Vue 在处理虚拟DOM的更新时，会对新旧两个 VNode 节点通过 Diff 算法进行比较，然后通过对比结果找出差异的节点或属性进行按需更新。这个 Diff 过程，在 Vue 中叫作 patch 过
Vue3 源码解读之静态提升
什么是静态提升 静态提升是Vue3编译优化中的其中一个优化点。所谓的静态提升，就是指在编译器编译的过程中，将一些静态的节点或属性提升到渲染函数之外。
Vue3 源码解读之模板AST 解析器(二)
模板在《Vue3 源码解读之模板AST 解析器(一) 》一文中，我们介绍了解析器的实现原理与状态机有关，并介绍了解析器的核心处理函数 parseChildren 的解析过程。在本文中，我们将详细介绍解
Vue3 源码解读之模板AST 解析器(一)
模板AST解析器 parser 在编译器的编译过程中负责将 模板字符串 解析为模板AST，解析器本质上就是一个状态机。接着分析了解析器的核心函数 parseChildren 的实现原理以及实现过程
Vue3源码解读之首次渲染DOM树
在首次渲染过程中，完成了根组件实例的挂载后，Vue3 会将template的内容编译后存放在根组件实例的 render 属性上(具体实现可参阅vue3 源码解读之初始化流程中的 finishCompo
Vue3源码解读之createApp
vue3 中，创建一个Vue应用实例是使用 createApp 方法： 那么，createApp 方法做了什么事情呢？它是如何把VNode转换成真实的DOM节点的呢？带着这些疑问，从文本开始，我们深入
下一页
