Lee Blog

从 Object.defineProperty 到 Proxy一切的一切还得从 Object.defineProperty 开始讲起，那是一个不一样的 API … （bgm 响起，自行体会） Object.definePropertyObject.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个 新属性，或修改一个 对象 的 现有属性，并返回此对象，其参数具体为： obj：要定义属性的对象 prop：要定义或修改的 属性名称 或 Symbol descriptor：要定义或修改的 属性描述符 从以上的描述就可以看出一些限制，比如： 目标是 对象属性，不是 整个对象 一次只能 定义或修改一个属性 当然有对应的一次处理多个属性的方法 Object.defineProperties()，但在 vue 中并不适用，因为 vue 不能提前知道用户传入的对象都有什么属性，因此还是得经过类似 Object.keys() + for 循环的方式获取所有的 key -> value，而这其实是没有必要使用...

reduce 函数可以根据需要进行累加、过滤、分组、映射等操作，是一个非常强大的数组方法。在数据处理时使用的非常频繁，很多复杂的逻辑如果用reduce去处理，都非常的简洁，在实际的开发工作过程中，积累了一些常见又超级好用的 reduce 技巧的代码片段，筛选了如下 10 个，以供大家参考 reduce 介绍reduce 是数组的方法，可以对数组中的每个元素依次执行一个回调函数，从左到右依次累积计算出一个最终的值。其语法为： arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) 其中，callback 是每个元素执行的回调函数，其包含 4 个参数： accumulator：累积器，即上一次回调函数执行的返回值。 currentValue：当前元素的值。 index：当前元素的下标。 array：原始数组。 initialValue 是可选的，表示累积器的初始值。 reduce 函数的执行过程如下： 如果没有提供...

unplugin-auto-import 和 unplugin-vue-components Bigger 2022年11月24日 18:15 · 阅读 1780 本文正在参加「金石计划 . 瓜分6万现金大奖」 背景unplugin-auto-import：为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。支持 TypeScript。 unplugin-vue-components：Vue 的按需组件自动导入。 这两个插件都是涉及到按需自动导入，所以我们在使用 Vue 和其对应的 组件之类时，都可能会需要这两个插件的帮助，帮助我们实现按需自动导入，避免全量引入的尴尬以及每个文件都要手动导入 API 的低效重复搬砖。 但是，在项目中使用 unplugin-auto-import 和 unplugin-vue-components 总会遇到的一些问题，在此特意汇总如下，以及提供最后的解决办法，希望帮助到有需要的人。 安装首先就是安装，为啥推荐使用 pnpm ，在此就不赘述了（可自行去了解）。 123pnpm add -D...

临时修改 npm 镜像： 1npm i --registry https://registry.npmjs.org/ 永久修改 npm 镜像： 1npm config set registry https://registry.npm.taobao.org 重置 npm 镜像： 1npm config set registry https://registry.npmjs.org/ 查看镜像的配置结果： 1npm config get registry

Letjs设计思想白皮书网址：https://github.com/let-js author: Letjs开发组 日期：2022-11 Letjs是什么？1Letjs是基于MVC和DDD等思想制定的一套前端工程结构模板，也是一套开发工程规范。 为什么要有Letjs？1231. 前端框架眼花缭乱，大家不知道该如何选择框架和配套工具，初始化工程困难。2. 前端代码缺乏分层约束，书写随意，大型工程时间一久就变得不易维护，代码混乱不堪。3....

前言Vue 3 正式版已经发布有一段时间了，随着 Vite 脚手架注定成为下一代前端工具链，许多用户都想基于 Vite 来构建 Vue 项目，如果想基于 Vite 构建 Vue 3 项目，社区模板完全满足您的需求，如果想构建 Vite 3 + Vue 3 + JavaScript 项目，那社区模板不太能满足您的需求，因为社区模板提供 Vue 3 项目几乎是基于 Vite 2 + TypeScript 构建，对于不熟悉 TypeScript 语言的用户不是很友好，因此接下来从 0 开始手把手带大家搭建一套规范的 Vite 3 + Vue 3 + JavaScript 前端工程化项目环境。 本文章篇幅较长，从以下几个方面展开： 基础搭建 代码规范 提交规范 自动部署 本项目完整代码托管在 GitHub 仓库[1]，欢迎点亮小星星 🌟🌟 技术栈 ⚡️ Vite 3[2] - 构建工具（就是快！） 🖖 Vue 3[3] - 渐进式 JavaScript 框架 🚦 Vue Router[4] - 官方路由管理器 📦 Pinia[5] - 值得你喜欢的 Vue...

前端性能优化到底是在优化什么？其实前端性能优化核心就是两点： 保证资源更快的 加载速度：达到越快渲染越快，视图展现就越快 保证视图更快的 渲染速度/交互速度：用户与页面交互，前提是页面要渲染出来，其次是页面需要尽早反馈，目的就是保证用户良好的体验性 而这些核心内容都可以从下面这个老生常谈的问题中延伸开来。 从输入 URL 到页面加载完成发生了什么？ 相信到现在为止，大家对这个问题的回答可以说是能够做到滔滔不绝了吧（如果不能，请忽略）！不过每个人回答的方向和重点应该都不一样，比如之前在 B 站 听 winter 大佬对这个问题的看法和解析的角度是更深、更广的。 在这还是要简单的总结一下核心内容： 进行 DNS 解析 建立 TCP 连接 客户端发送 HTTP 请求 服务端响应 HTTP 资源 浏览器获取响应内容，进行解析和渲染 以上任意一点都可进行无限扩展、延伸，但点到为止才是现在真正需要的。 性能指标RAIL 模型Google 为前端页面性能的评估提出了 RAIL 模型，核心内容如下： Response 响应 Animation 动画 Idle...

01...

[TOC] 写在前面本文的目标是实现一个基本的vue3的响应式，包含最基础的情况的处理，本文是系列文章，如果你对vue3还不了解，那么请移步： 超详细整理vue3基础知识💥 手写mini-vue3第三弹！万字实现渲染器首次渲染流程 🎉 🎉 更新！更新！实现vue3虚拟DOM更新&diff算法优化🎉 🎉 本文你将学到 一个基础的响应式实现 ✅ Proxy ✅ Reflect ✅ 嵌套effect的实现 ✅ computed ✅ watch ✅ 浅响应与深响应 ✅ 浅只读与深只读 ✅ 处理数组长度 ✅ ref ✅ toRefs ✅ 一. 实现一个完善的响应式所谓的响应式数据的概念，其实最主要的目的就是为数据绑定执行函数，当数据发生变动的时候，再次触发函数的执行。 例如我们有一个对象data，我们想让它变成一个响应式数据，当data的数据发生变化时，自动执行effect函数，使nextVal变量的值也进行变化： 1234567891011121314// 定义一个对象let data = { name: 'pino', ...

[TOC] 留存分析据某第三方平台近期调研结果显示，在金融创业领域，2013 年一家互联网金融创业公司的投资获客成本区间为 300 – 500 元，而2016 年则涨为 1000 – 3000 元；在电商领域，新用户的获取成本，是维护一个老用户的 3 倍到 10 倍…… 如今，高居不下的获客成本让互联网、移动互联网创业者们遭遇新的“天花板”，甚至陷入“纳不起”新客的窘境。而花费极高成本所获取的客户，可能仅打开一次...