摘要:
响应式原理 1.什么是响应式 监听对象中的属性被设置或获取的过程,当对象属性变化时能够监听到,并发出通知 2.响应式函数的封装 const reactiveFns = [] watchFn(fn) { } 3.Depend 类的封装 class Depend { constructor() { th 阅读全文
摘要:
VueUse 是 Anthony Fu 的一个开源项目,它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。 它为常见的开发人员用例提供了数十种解决方案,例如,跟踪引用更改、检测元素可见性、简化常见的 Vue 模式、键盘/鼠标输入 阅读全文
摘要:
构建简易Reac build-your-own-react是一篇操作说明书,指导用户一步步实现一个简易的React,从中了解到React的大体工作流程。这篇文章是我的观后整理和记录,或许对大家会有所帮助。 构建简易React,分为九个阶段: 介绍createElement与render 实现crea 阅读全文
摘要:
react核心架构 react的核心可以用ui=fn(state)来表示,还可以用 const state = reconcile(update); const UI = commit(state); react源码可以分为如下几个模块: Scheduler(调度器): 排序优先级,让优先级 阅读全文
摘要:
#React性能检测优化工具 Profiler Code SandBox 可以前往 https://codesandbox.io/s/react-profiler-example-o75nc?fontsize=14&hidenavigation=1&theme=dark 在线编辑效果。 Profil 阅读全文
摘要:
无论做业务需求还是做平台需求的同学,随着需求的不断迭代,通常都会出现逻辑复杂、状态混乱的现象,维护和新增功能的成本也变的十分巨大,苦不堪言。下图用需求、业务代码、测试代码做对比: 图中分了 3 个阶段: 阶段 1:正常,都是线性增长。 阶段 2:需求数正常增长,业务代码行数开始增长,测试代码行数大幅 阅读全文
摘要:
想要知道 React 的内部运行机制,实际上就是要探索 React 如何将组件映射屏幕,以及组件中的状态发生了变化之后 React 如何将这些「变化」更新到屏幕上。 对于首次渲染,React 的主要工作就是将 React.render 接收到的 VNode 转化 Fiber 树,并根据 Fiber 阅读全文
摘要:
本文主要介绍 webpack5 项目的打包优化方案 打包优化 速度分析:要进行打包速度的优化,首先我们需要搞明白哪一些流程的在打包执行过程中耗时较长。 这里我们可以借助 speed-measure-webpack-plugin 插件,它分析 webpack 的总打包耗时以及每个 plugin 和 l 阅读全文
摘要:
本文主要是讲解 <script setup> 与 TypeScript 的基本使用。 <script setup> 是什么? <script setup> 是在单文件组件 (SFC) 中使用 composition api 的编译时语法糖。 本文使用vue的 3.2.26 版本 1、发展过程 我们先 阅读全文
摘要:
参考实现代码: class MyPromise { // 构造方法 constructor(executor) { // 初始化值 this.initValue(); // 初始化this指向 this.initBind(); try { // 执行传进来的函数 executor(this.reso 阅读全文