- 博客(80)
- 收藏
- 关注
RSS订阅原创 Bun 入门到精通（二）——初始化
bun init使用bun init可以搭建一个新项目，类似于npm init，同样，bun init也可以接收-y--yes的参数，同样类似于。bun init。
2024-04-27 23:23:24
1426
原创 Bun 入门到精通（一）——简介
Bun 是用于 JavaScript 和 TypeScript 应用程序的多合一工具包。它作为一个名为bun的可执行文件提供。其核心是 Bun 运行时，这是一个快速的 JavaScript 运行时，旨在替代 Node.js。它是用 Zig 编写的，并由 JavaScriptCore 提供支持，大大减少了启动时间和内存使用量。
2024-04-26 17:54:30
1128
1
原创 10w 字前端技术文档分析
在 2023 年 11 月份，有小伙伴跟我说前端学习得很迷茫，不知道该学什么，也不知道已经学过的学得怎么样，于是，我立即萌生了一种想法，我要写一份。经历了 2 个多月的不断努力，终于，我的文档在今天达到了。，既可以帮助我自己查漏补缺，也可以帮助到其他人。文档发布在飞书上，可以通过。，进行查看，文档可以。
2024-01-20 16:08:07
605
原创 Next.js 学习笔记（六）——缓存
机制是什么在哪里目的持续时间请求记忆化函数返回值服务器在 React 组件树中重用数据每请求生命周期数据缓存数据服务器跨用户请求和部署存储数据持久性（可重新验证）全路由缓存HTML 和 RSC 有效负载服务器降低渲染成本并提高性能持久（可重新验证）路由器缓存RSC 有效负载客户端减少导航时的服务器请求用户会话或基于时间的请求默认情况下，Next.js 会尽可能多地缓存，以提高性能并降低成本。这意味着路由会静态渲染，数据请求也会缓存，除非你选择退出。
2024-01-11 21:47:02
2338
原创 Next.js 学习笔记（五）——渲染
RSC Payload 是渲染的 React Server Components 树的紧凑二进制表示。React 在客户端上使用它来更新浏览器的 DOM。
2024-01-11 21:39:11
1306
原创 从 2023 GitHub 涨星数看 2024 前端发展方向
结合 AIGC 在原有前端项目上进行升级改造基于 Rust 对前端工具链进行升级在原有 CSR 项目的基础上引入 SSR在合适的项目中使用 Node.js（例如：Nest） 替代 Java鸿蒙系统跨端支持以上仅为作者个人的看法，若有不同的看法或作者有错误的理解欢迎共同探讨。
2024-01-10 17:37:37
1367
原创 一文带你弄懂 V8 数组的快速 / 字典模式
先抛出一个问题，下面两端代码哪个的效率更高？控制台的输出如下：可以很明显的看到执行耗时的差别，第一段代码的效率远高于第二段代码。那么，这是为什么呢？
2024-01-07 21:44:26
1051
原创 Next.js 学习笔记（三）——路由
本页将指导你如何在 Next.js 应用程序中定义和组织路由。要了解流式传输是如何在 React 和 Next.js 中工作的，首先理解服务端渲染（SSR）及其局限性是很有帮助的。首先，在服务器上获取给定页面的所有数据然后，服务器为页面渲染 HTML页面的 HTML、CSS 和 JavaScript 被发送到客户端使用生成的 HTML 和 CSS 显示非交互式用户界面最后，React水合（hydrates）用户界面，使其具有交互性。
2023-12-19 17:50:02
1273
原创 Next.js 学习笔记（二）——项目结构
此页面提供了 Next.js 项目的文件和文件夹结构的概述。它涵盖了app和pages目录中的顶级文件和文件夹、配置文件以及路由约定。
2023-12-16 21:59:10
194
原创 Next.js 学习笔记（一）——安装
如果你更喜欢使用 Pages Router 而不是 App Router，你可以在项目的根目录中创建页。启动一个新的 Next.js 应用程序，该应用程序会自动为你设置所有内容。Next.js 使用文件系统路由，这意味着应用程序中的路由由文件的结构决定。该路由器允许你使用 React 的最新功能，是基于社区反馈的。将使用你的项目名称创建一个文件夹，并安装所需的依赖项。需要知道：虽然你可以在同一个项目中使用多个路由器，但。我们建议你在新项目中只使用一个路由器，以避免混淆。文件，以控制来自服务器的初始响应。
2023-12-16 15:58:23
719
原创 Vue3 源码解读系列（十五）——编译
AST 转换其实就是语法分析阶段，把 AST 节点做一层转换，构造出语义化更强信息更丰富的 codegenCode，它在后续的代码生成阶段起非常重要的作用。问题：静态提升的好处是针对静态节点不用每次在 render 阶段都执行一次 createVNode 创建 vnode 对象，但它有没有成本呢？语法，即：组件可以有多个根节点，但是树状结构只能有一个根节点，所以需要在外层套一个虚拟节点。答：AST 是抽象语法树，用于描述节点在模板中完整的映射信息。问题：为什么 AST 的根节点是虚拟节点？
2023-11-20 22:14:12
363
原创 Vue3 源码解读系列（十四）——内置组件
*** Teleport 组件定义*/// 组件创建和更新// 创建逻辑} else {// 更新逻辑},// 组件删除// 删除逻辑},* KeepAlive 组件定义*/// 用户自定义的配置props: {include: [String, RegExp, Array], // 包含exclude: [String, RegExp, Array], // 不包含max: [String, Number], // 最大缓存个数（默认不限制个数）},
2023-11-20 22:11:12
305
原创 Vue3 源码解读系列（十二）——指令 directive
定义：本质就是一个 JavaScript 对象，对象上挂着一些钩子函数。实现：在元素的生命周期中注入代码。
2023-11-20 22:06:44
247
原创 Vue3 源码解读系列（十一）——插槽 slot
把父组件中编写的插槽内容保存到一个对象上，并且把具体渲染 DOM 的代码用函数的方式封装，然后在子组件渲染的时候，根据插槽名在对象中找到对应的函数，然后执行这些函数做真正的渲染。插槽的实现实际上就是一种。
2023-11-20 21:59:34
271
原创 Vue3 源码解读系列（九）——依赖注入
祖先组件不需要知道哪些后代组件在使用它提供的数据。依赖注入用于祖先组件向后代组件传递数据。后代组件也不需要知道注入的数据来自哪里。
2023-11-20 21:51:37
90
原创 Vue3 源码解读系列（七）——侦听器
侦听器是当侦听的对象或者函数发生了变化则自动执行某个回调函数。侦听器的内部设计：侦听响应式数据的变化，内部创建 effect runner，首次执行 runner 做依赖收集，然后在数据发生变化后，以某种调度方式去执行回调函数。调用侦听器的两种方式：通过 Composition API通过sourcesourcerefreactivefunctionsourcerefgettersourcereactivesourcegetterdeeptruesourcecbwatch APIcbgetter。
2023-11-20 17:32:43
113
原创 Vue3 源码解读系列（六）——计算属性
可以正常返回，但是可能会影响用户体验，例如：在回调函数中通过 setTimeout 将某个依赖变量进行更改，此时页面会先展示定时器执行前的结果，等定时器执行完成后，页面会重新渲染。内部会缓存上次的计算结果 value，而且只有 dirty 为 true 时才会重新计算，如果访问计算属性时 dirty 为 false，那么直接返回这个 value。由于 async 定义的函数返回的是 promise，所以虽然内部的执行同步了，但是不能达到我们想要的效果，不会报错，但几乎可以视为不行。
2023-11-20 17:29:12
70
原创 Vue3 源码解读系列（四）——组件更新
的节点，需要遍历对应的序列，如果在遍历旧子序列的过程中需要判断某个节点是否在新子序列中存在，这就需要双重循环，双重循环的复杂度是 O(n。“ 来实现，贪心的时间复杂度为 O(n)，二分查找的时间复杂度 O(logn)，总时间复杂度为 O(nlogn)。对比新旧子序列中的节点，key 相同的就是同一个节点，执行执行 patch 更新即可。相对来说，这些操作中最麻烦的就是移动，既要判断哪些节点需要移动，也要清除如何移动。)，为了优化这个复杂度，建立索引图，把时间复杂度降低到 O(n)。建立索引图（空间换时间）
2023-11-11 23:33:05
400
原创 Vue3 源码解读系列（三）——组件渲染
组件 vnode 主要维护着组件的定义对象，组件上的各种 props，而组件本身是一个抽象节点，它自身的渲染其实是通过执行组件定义的 render 渲染函数生成的子树 vnode 来完成，然后再通过 patch 这种递归的方式，无论组件的嵌套层级多深，都可以完成整个组件树的渲染。：因为 patch vnode 的过程不同平台可以有自己的实现，基于 vnode 再做服务端渲染、weex 平台、小程序平台的渲染。：引入 vnode，可以把渲染过程抽象化，从而使得组件的抽象能力也得到提升。
2023-11-11 21:35:40
556
原创 Vue3 源码解读系列（二）——初始化应用实例
方法是一个标准的可跨平台的组件渲染流程，因此需要根据具体场景进行定制化。答：因为 Vue 不仅仅是为 Web 平台服务，它的目标是。创建 Vue 实例对象。来创建 app 对象。
2023-11-11 17:33:15
320
原创 Vue3 源码解读系列（一）——Vue3的优化
使用 monorepo 管理代码将各模块拆分到不同的 package 中，每个 package 有各自的 API、类型定义和测试，使得模块拆分更加细化，模块之间的依赖也更加明确。使用 TypeScript 开发代码。
2023-11-11 17:28:38
140
原创 Vue 传参踩坑之旅——事件总线与 props
这个 bug 其实给了我蛮多启发的，也能理解之前看到别人说业务组件中尽量使用了，事件总线的原理我其实是知道的，但是还是会产生这种 bug，因为随着业务的发展，新功能的产生以及老功能的优化等都可能对原来的数据结构或组件结构进行更改，在我们写业务代码时是比较难精准的预料到未来的变化的，此时就需要我们的代码有足够高的容错性，诸如、事件总线等组件通信方式固然很方便，但是在代码重构或其他一些比较重大改动时项目的数据流又会变得难以预测。代码量会变得更多、冗余组件数据流变得清晰当项目结构发生变化时重构会更简单。
2023-11-07 11:31:38
138
原创 pinia踩坑之旅——在组件外使用pinia
我们在使用一项不熟悉的技术时往往都是去网上找一篇使用文章看下用法就上手了，这么做的好处时能够最快速的上手在项目中进行使用，但是这类文章往往只会把基本的用法进行描述，而不会把一些坑点说出来，如果在使用时恰好遇到了就非常棘手。我推荐三种我日常使用的比较多的解决办法，以及各自的优缺点：百度没错，你没有看错，就是百度，就是这么朴实无华。把报错复制到百度直接搜结果，如果不是一些比较冷门或者先进的技术问题都能搜得到。优点：速度最快缺点：网上资料质量参差不全，容易遇到一些 ly 文章很耗费时间官网。
2023-10-19 17:31:00
1393
3
原创 JS如何判断对象为空？以及各自的缺点。
通过来获取对象的键进行判断。缺点：只能获取可枚举的字符串键。通过来将对象为字符串进行判断。缺点：以undefined、函数作为值，以symbol作为键或值都不能被序列化。通过for...in直接遍历对象进行判断。缺点：只能遍历可枚举属性。
2023-10-17 22:56:36
439
1
原创 分享一个JS对象隐式转换的问题
今天在群里看到一个人发出的提问，先看问题是什么。这位群友的问题是：为什么obj[prop1]打印出来的值是2，而不是1。
2023-10-09 21:12:14
121
原创 React Hooks总览
如果在渲染期间创建了一个新对象，并立即将其传递给 useDeferredValue，那么每次渲染时这个对象都会不同，这将导致后台不必要的重新渲染。否则，返回上次缓存的快照。useReducer 能够在无状态组件中运行的类似 redux 的功能 api。useContext 用于接收祖先组件的 context 传递的信息。useTransition 可以在不阻塞 UI 的情况下来更新状态。与 state 的区别：ref 的改变不会渲染，state 会。与普通对象的区别：ref 的值不会重置，普通对象会。
2023-09-02 15:57:42
616
原创 koa框架介绍以及核心原理实现
Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。
2023-08-06 23:49:43
280
原创 我的创作纪念日
平时学习过程中会遇到一些问题，也会有对某一方面进行深入的研究，这些都是可以拿来分享的。目前正在深入学习前端工程化，同时也在了解后端的开发，期望能够早日进入腾讯！因为发布文章其实也相当于对知识点进行了复习，所以开始尝试了发布文章。默默无闻的前端小白，毫无成就可言……
2023-08-04 23:21:41
485
原创 微信小程序学习笔记（五）——优化
初始渲染缓存可以在小程序非首次加载时，使视图层无需等待逻辑层初始化完毕，直接将初始的数据渲染到页面。步骤二：点击生成骨架屏，将有弹窗提示是否允许插入骨架屏代码。确定后将在当前页面同级目录下生成。动态初始渲染缓存：除了 data 外还有一些数据渲染到页面中。静态初始渲染缓存：只将 data 中的数据渲染到页面中。工具入口位于模拟器面板右下角三点处。进行骨架屏相关配置，页面配置会覆盖掉全局配置。全局配置：**全局的。
2023-07-19 16:01:31
199
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人