通过setTimeout,创建宏任务,来判断延迟与超时 执行load函数,重置loaded状态,创建强制父组件更新任务 读过RunTimeCore——scheduler源码分析的同学肯定对queueJob不陌生 最后返回一个工厂函数,这个函数会根据状态返回不同组件的VNode defineAsyncComponent API的完整代码: ...
runtime-core:平台无关的渲染逻辑(patch、vnode、组件系统) runtime-dom:浏览器平台专属渲染器(DOM 操作、属性 patch、事件绑定等) @vue/compiler-dom:模板编译器(将 template 转换为 render 函数) runtime-dom就是连接runtime-core与浏览器平台的桥梁。它通过实现 DOM 专属的操作接口(如 createElement、patchProp...
runtime-core:与平台无关的 runtime,其支持虚拟 DOM 渲染器,Vue 组件和各种 API; runtime-dom:针对浏览器的 runtime,支持处理原生 DOM,API,事件等; runtime-test:为了测试编译而写的轻量级 runtime,由于其渲染出来的 DOM 对象实际上是一个 JS 对象,故而可以运行在所有的 JS 环境中。除了用于测试渲染是否正...
runtime-core : 平台无关的运行时核心代码。包括虚拟dom渲染、组件实现和JavaScript API。可以使用这个包针对特定平台构建高价运行时(即定制渲染器)。 runtime-dom : 针对浏览器的运行时。包括对原生DOM API、属性(attributes)、特性(properties)、事件回调的处理。 runtime-test : 用于测试的轻量级运行时。可以在任...
vue的runtime有一个任务队列调度器,看名字就知道是用来存放更新队列的。当数据更新的时候会去触发组件自身的update,然后把组件自己加入到调度器里的任务队列中。 (可能你在想我又扯远了,实际上是有联系的,别急,快到了) 简单的来看下这块相关的代码 代码位置:packages\runtime-core\src\renderer.ts const upda...
runtime-core 目录下有多个文件,我暂且把每个文件都当做一个子模块来看待。vue 的代码质量还是挺好的,模块与模块之间的耦合性都不是特别高,正因为如此,基本上每个模块都有自己单独对应的单元测试文件。 我在看的时候,基本上就是挨个看这些模块的单元测试,然后调试过程中,会主动的进行一些代码跳转,去看一下具体的实...
runtime core中的代码较为简单,我们一起简单看下。 记录组件创建阶段的computed Effect至instance.effects,方便组件卸载的时候,移除当前实例的computed effect 我们使用的computedAPI就是经过runtime core处理过的computed import { computed as _computed, } from '@vue/reactivity' ...
runtime-core reactivity PS:ssr相关的也会绕过。 可能还会涉及到其它的包,这个后面遇到了再说。 之前想过这几个包分开来独立分析,但是这样分析的时候可能会缺少包之间的联系,会有些没有没脑的。 不过有个点需要提前说明,这里runtime里的方法不仅仅是提供给template的,更多的是我们开发者常用的api,这些是作用于...
真正的Vue应用对象,是执行ensureRenderer().createApp(...args)创建的,而ensureRenderer函数内部调用了createRenderer函数。这个createRenderer函数位于runtime-core中; 在调用函数createRender函数的时候,传入了参数rendererOptions,这些参数是一些操作DOM节点和DOM节点属性的具体方法。