createRenderer.ts:这个和其他文件耦合度较低,可以理解为VNode的渲染器,只要实现了其接口,可以在任何上下文环境中进行渲染,比如小程序、native、canvas或者内存环境,关于如何编写一个renderer,直接看runtime-test或者runtime-dom的代码即可 directives.ts: 指令相关的内部api,当前的代码版本,这部分可能很多todo因此可以日后...
runtime-core 目录下有多个文件,我暂且把每个文件都当做一个子模块来看待。vue 的代码质量还是挺好的,模块与模块之间的耦合性都不是特别高,正因为如此,基本上每个模块都有自己单独对应的单元测试文件。 我在看的时候,基本上就是挨个看这些模块的单元测试,然后调试过程中,会主动的进行一些代码跳转,去看一下具体的实...
通过setTimeout,创建宏任务,来判断延迟与超时 执行load函数,重置loaded状态,创建强制父组件更新任务 读过RunTimeCore——scheduler源码分析的同学肯定对queueJob不陌生 最后返回一个工厂函数,这个函数会根据状态返回不同组件的VNode defineAsyncComponent API的完整代码: ...
import{createRenderer}from'@vue/runtime-core'const{render,createApp}=createRenderer({patchProp,insert,remove,createElement,// ...})// `render` is the low-level API// `createApp` returns an app instance with configurable context shared// by the entire app tree.export{render,createApp}export*...
{registerRuntimeCompiler,RenderFunction,warn}from'@vue/runtime-dom'import*asruntimeDomfrom'@vue/runtime-dom'import{isString,NOOP,generateCodeFrame,extend}from'@vue/shared'import{InternalRenderFunction}from'packages/runtime-core/src/component'if(__DEV__){initDev()}constcompileCache:Record<string,...
runtime-core逻辑 创建app 进行初始化 基于rootComponent,初始化VNode ShapeFlags.ELEMENT (1) ShapeFlags.FUNCTIONAL_COMPONENT(1 << 1) ShapeFlags.STATEFUL_COMPONENT(1 << 2) ShapeFlags.ARRAY_CHILDREN (1 << 3) ShapeFlags.TEXT_CHILDREN (1 << 4) ShapeFlags.SLOTS_CHILDREN (1 << 5) ShapeFlags.TE...
@vue/runtime-core/dist/runtime-core.d.ts Version: 33.6 kBTypeScriptView Raw 1 import { ComputedGetter } from '@vue/reactivity'; 2 import { ComputedRef } from '@vue/reactivity'; 3 import { DebuggerEvent } from '@vue/reactivity'; ...
最近又抽时间把 vue-next/runtime-core 的源码陆陆续续地看完了,期间整理了很多笔记,但都是碎片化的。本来是想整理一下,写成一篇文章分享出来的,但是感觉最终的成果物只能是一篇篇幅巨长的解析文,就算我一行一行的把源码加上注释,其阅读体验也会很差,因为每个人读代码的习惯不同,思路不同。正所谓抛砖引玉,所...
* Check the `patchElement` function in '../../runtime-core/src/renderer.ts' to see how the * flags are handled during diff. */ exportdeclare constenumPatchFlags { /** * Indicates an element with dynamic textContent (children fast path) ...
runtime阶段 __VUE_HMR_RUNTIME__ 我们直接去到对应的文件中:packages\runtime-core\src\hmr.ts if(__DEV__){getGlobalThis().__VUE_HMR_RUNTIME__={createRecord:tryWrap(createRecord),rerender:tryWrap(rerender),reload:tryWrap(reload)}asHMRRuntime}functiontryWrap(fn:(id:string,arg:any)=>any...