紫圣

KeepLive 组件的作用类似于 HTTP 中的持久链接。它可以避免组件实例不断地被销毁和重建。当被 KeepAlive 的组件在卸载的时候，会将该组件搬运到一个隐藏的容...

JavaScript AST 转换器 transform 在编译器的编译过程中负责将 模板AST 转换为 JavaScript AST。...

静态提升，就是指在编译器编译的过程中，将一些静态的节点或属性提升到渲染函数之外。它能够减少更新时创建虚拟 DOM 带来的性能开销和内存占用。...

Vue 在追踪变化时，通过 track 函数收集依赖，即将副作用函数添加到 targetMap 中，通过 trigger 函数来执行对应的副作用函来完成更新。...

watch 的本质就是观测一个响应式数据，当数据发生变化时通知并执行相应的回调函数。watch的实现利用了effect 和 options.scheduler 选项。...

computed是一个懒执行的副作用函数，通过 _dirty 标志使得副作用函数可以懒执行。dirty 标志用来表示是否需要重新计算值，当需要计算属性需要重新计算时，则重新...

ref 本质上是一个 “包裹对象”，因为 ES6 的 Proxy 无法提供对原始值的代理，所以需要使用一层对象作为包裹，间接实现原始值的响应式方案。...

Vue.js 3 中的响应式数据是基于 ES6 中的Proxy实现的，Proxy除了可以代理Object、Array、还可以代理ES6中新增的Map、Set、WeakMap...

解析器在解析模板过程中，无论是解析文本节点、插值节点还是标签的属性值，最终都会调用 decodeHtml 函数来解码文本内容中可能存在的HTML实体。...

模板AST 解析器 parser 本质上就是一个状态机。它在编译器的编译过程中负责将 模板字符串 解析为 模板AST。...

代码生成器 generate 在编译器的编译过程中负责将 JavaScript AST 转换成渲染函。代码生成本质上是字符串拼接的艺术。...

执行完ClassComponent的三种更新后，updateClassComponent 最后执行了finishClassComponent()方法来判断是否需要 rend...

ClassComponent实例已经存在，且已经是多次渲染，此时调用updateClassInstance方法执行更新操作，且会执行componentWillUpdate生...

ClassComponent 是初次渲染时，调用 resumeMountClassInstance方法，复用ClassComponent实例，并更新state/props。...

ClassComponent实例未被创建时会调用 constructClassInstance方法构建class组件实例，然后调用mountClassInstance方法挂...

当 workInProgress.tag 的类型为ClassComponent时，调用 updateClassComponent 函数对class组件分成三种情形执行更新操...

commit阶段的可以分为三个阶段，before mutation 、mutation phase 阶段(挂载阶段)、layout phase 阶段(布局阶段)。...

setState和forceUpdate两者的更新流程相似，唯一的不同是执行forceUpdate时 update对象的tag属性值更改成了ForceUpdate。...

在执行ReactDOM.render时，主要是创建fiber和创建update。无论是首次还是多次调用，都会调用updateContainer函数创建update 来开启一...