用户6258737545499
获得徽章 0
使用index作为key时，在删除数据时，因为vue不会深入地区对比子组件的文本内容，所以会错误移除VDOM中的节点（index的值是不固定的）。
评论
点赞
VitePress 利用 Vue 的编译时优化以及内部定制的 Hydrate 方案足以解决传统 SSG 的全量 hydration 问题，采用 Islands 架构意义并不大。
那进一步讲，像 Vue 这种 Shell 优化方案对于包含编译时的前端框架是否通用？这里我们可以先大概总结出 Shell 方案需要满足的条件:
模板编译阶段，将静态节点进行特殊标记
运行时，支持 hydrate 跳过对静态节点的内容检查
基于上面这两点，其他的代表性编译时框架如Solid、Svelte 很难实现 Vue 的 Shell 架构(没法标记静态节点)，因此 Shell 方案可以理解为在 Vue 框架下的一个特殊优化了。对于 Vue 外的其它框架方案，仍然可以采用 Islands 进行特定场景的优化。
那进一步讲，像 Vue 这种 Shell 优化方案对于包含编译时的前端框架是否通用？这里我们可以先大概总结出 Shell 方案需要满足的条件:
模板编译阶段，将静态节点进行特殊标记
运行时，支持 hydrate 跳过对静态节点的内容检查
基于上面这两点，其他的代表性编译时框架如Solid、Svelte 很难实现 Vue 的 Shell 架构(没法标记静态节点)，因此 Shell 方案可以理解为在 Vue 框架下的一个特殊优化了。对于 Vue 外的其它框架方案，仍然可以采用 Islands 进行特定场景的优化。
展开
评论
点赞
20个开源的前端低代码项目：Appsmith、LowCodeEngine、Amis、tmagic-editor、dooring-electron-lowcode、vite-vue3-lowcode、shida、quark-h5、gods-pen、luban-h5、mometa、h5-factory、steedos-platform、lz-h5-edit、tefact、fast-poster、openDataV、mall-cook、form-generator、vjdesign
展开
评论
点赞
我们可以发现将整个结构扁平化后收益特别多。
结构很清晰，我们可以很轻易的对数据进行处理。
特别是在特别大数据量的情况下，这种形式可以极大的提高性能，减去需要遍历的性能消耗。
以前各种在数组对象出现的弊端都消失了。
结构很清晰，我们可以很轻易的对数据进行处理。
特别是在特别大数据量的情况下，这种形式可以极大的提高性能，减去需要遍历的性能消耗。
以前各种在数组对象出现的弊端都消失了。
评论
点赞
TinyPNG使用智能的「有损压缩技术」来减少WEBP、JPEG和PNG文件的文件大小。通过选择性地减少图像中的「颜色数量」，使用更少的字节来存储数据。这种效果几乎是看不见的，但在文件大小上有非常大的差别。
实现思路
总体分为五个过程：
1.查找：找出所有的图片资源；
2.分配：均分任务到每个进程；
3.上传：把原图上传到TinyPng；
4.下载：从TinyPng中下载压缩好的图片；
5.写入：用下载的图片覆盖本地图片；
实现思路
总体分为五个过程：
1.查找：找出所有的图片资源；
2.分配：均分任务到每个进程；
3.上传：把原图上传到TinyPng；
4.下载：从TinyPng中下载压缩好的图片；
5.写入：用下载的图片覆盖本地图片；
展开
评论
点赞
以上通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制，下面一起总结一下实现要点：
1.函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行
2.CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性
3.CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果
4.还可以通过 transition 的回调函数动态设置按钮禁用态
5.这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
1.函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行
2.CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性
3.CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果
4.还可以通过 transition 的回调函数动态设置按钮禁用态
5.这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
展开
评论
2
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，通过抓包可以：分析网络问题、业务分析、 分析网络信息流通量、 网络大数据金融风险控制、探测企图入侵网络的攻击、探测由内部和外部的用户滥用网络资源、探测网络入侵后的影响、 监测链接互联网宽频流量、 监测网络使用流量（包括内部用户，外部用户和系统）、监测互联网和用户电脑的安全状态、渗透与欺骗等
评论
点赞
什么是Monorepo？就是把多个项目放在一个仓库里面，相对立的是传统的 MultiRepo 模式，即每个项目对应一个单独的仓库来分散管理。
Monorepo给现代的前端工程带来的收益：首先是工作流的一致性，其次是项目基建成本的降低，再者，团队协作也更加容易。比如lerna，封装了Monorepo中的依赖安装、脚本批量执行等基本功能，但没有一套构建、测试、部署的工具链，整体Monorepo功能比较弱，但要用到业务项目当中，往往需要基于它进行顶层能力的封装，提供全面工程能力的支撑。
· Promise(承诺)，给予调用者一个承诺，过一会返回数据给你，就可以创建一个promise对象
· 当我们new一个promise，此时我们需要传递一个回调函数，这个函数为立即执行的，称之为（executor）
· 这个回调函数，我们需要传入两个参数回调函数，reslove,reject(函数可以进行传参)
——当执行了reslove函数，会回调promise对象的.then函数
——当执行了reject函数，会回调promise对象的.catche函数
· 在函数中，new这个类的时候，传入的回调函数称之为executor（会被Promise类中自动执行）
· 在正确的时候调用resolve函数，失败的时候调用reject函数，把需要的参数传递出去。
· 异常处理
——其中在.then方法中可以传入两个回调，您也可以查看Promise/A+规范
o第一个则是fulfilled的回调
o第二个则是rejected的回调
· 那这样有什么好处呢？ 看起来比早期处理的方案还要繁琐呢?
1.统一规范，可以增强阅读性和扩展性
2.小幅度减少回调地狱
· 使用promise的时候，给它一个承诺，我们可以将他划分为三个阶段
1pending(待定)，执行了executor，状态还在等待中，没有被兑现，也没有被拒绝
2fulfilled(已兑现)，执行了resolve函数则代表了已兑现状态
3rejected(已拒绝)，执行了reject函数则代表了已拒绝状态
· 首先，状态只要从待定状态，变为其他状态，则状态不能再改变
Monorepo给现代的前端工程带来的收益：首先是工作流的一致性，其次是项目基建成本的降低，再者，团队协作也更加容易。比如lerna，封装了Monorepo中的依赖安装、脚本批量执行等基本功能，但没有一套构建、测试、部署的工具链，整体Monorepo功能比较弱，但要用到业务项目当中，往往需要基于它进行顶层能力的封装，提供全面工程能力的支撑。
· Promise(承诺)，给予调用者一个承诺，过一会返回数据给你，就可以创建一个promise对象
· 当我们new一个promise，此时我们需要传递一个回调函数，这个函数为立即执行的，称之为（executor）
· 这个回调函数，我们需要传入两个参数回调函数，reslove,reject(函数可以进行传参)
——当执行了reslove函数，会回调promise对象的.then函数
——当执行了reject函数，会回调promise对象的.catche函数
· 在函数中，new这个类的时候，传入的回调函数称之为executor（会被Promise类中自动执行）
· 在正确的时候调用resolve函数，失败的时候调用reject函数，把需要的参数传递出去。
· 异常处理
——其中在.then方法中可以传入两个回调，您也可以查看Promise/A+规范
o第一个则是fulfilled的回调
o第二个则是rejected的回调
· 那这样有什么好处呢？ 看起来比早期处理的方案还要繁琐呢?
1.统一规范，可以增强阅读性和扩展性
2.小幅度减少回调地狱
· 使用promise的时候，给它一个承诺，我们可以将他划分为三个阶段
1pending(待定)，执行了executor，状态还在等待中，没有被兑现，也没有被拒绝
2fulfilled(已兑现)，执行了resolve函数则代表了已兑现状态
3rejected(已拒绝)，执行了reject函数则代表了已拒绝状态
· 首先，状态只要从待定状态，变为其他状态，则状态不能再改变
展开
评论
点赞
什么是Monorepo？就是把多个项目放在一个仓库里面，相对立的是传统的 MultiRepo 模式，即每个项目对应一个单独的仓库来分散管理。
Monorepo给现代的前端工程带来的收益：首先是工作流的一致性，其次是项目基建成本的降低，再者，团队协作也更加容易。比如lerna，封装了Monorepo中的依赖安装、脚本批量执行等基本功能，但没有一套构建、测试、部署的工具链，整体Monorepo功能比较弱，但要用到业务项目当中，往往需要基于它进行顶层能力的封装，提供全面工程能力的支撑。
Monorepo给现代的前端工程带来的收益：首先是工作流的一致性，其次是项目基建成本的降低，再者，团队协作也更加容易。比如lerna，封装了Monorepo中的依赖安装、脚本批量执行等基本功能，但没有一套构建、测试、部署的工具链，整体Monorepo功能比较弱，但要用到业务项目当中，往往需要基于它进行顶层能力的封装，提供全面工程能力的支撑。
展开
评论
点赞
用chapGPT读vue3代码:
ChatGPT 可以告诉我们，setup 函数在packages/runtime-core/src/component.ts 文件中。runtime-core是 Vue3 的运行时核心代码。setupComponent 函数是在createComponentInstance函数中执行的，createComponentInstance看名字是创建组件实例，可以看详细代码。
小结一下setup的始末：
1从组件挂载开始调用createComponentInstance创建组件实例
2传递组件实例给setupComponent
3setupComponent内部初始化 props 和 slots
4setupStatefulComponent 执行组件的setup
5完成 setup 流程
6返回渲染函数
ChatGPT 可以告诉我们，setup 函数在packages/runtime-core/src/component.ts 文件中。runtime-core是 Vue3 的运行时核心代码。setupComponent 函数是在createComponentInstance函数中执行的，createComponentInstance看名字是创建组件实例，可以看详细代码。
小结一下setup的始末：
1从组件挂载开始调用createComponentInstance创建组件实例
2传递组件实例给setupComponent
3setupComponent内部初始化 props 和 slots
4setupStatefulComponent 执行组件的setup
5完成 setup 流程
6返回渲染函数
展开
评论
点赞