20240402 前端开发日报

揭秘，unibest诞生过程；浅谈，开源真不容易；“作为一名学前端的我，如何实现渲染十万条数据？”；Flutter Web 的未来，Wasm Native 即将到来；flutter-barrage-craft — 能成为pub.dev中最好用的弹幕插件吗？；vue3:reactive,ref,toRefs,computed的使用；Flutter实现酷狗歌词逐字上色的效果；跃然纸上的灵感再现，手绘风格的开源绘图白板工具：Excalidraw；拖拉拽做游戏？轻松打造个人掌机世界 | 开源日报 No.176

1. 揭秘，unibest诞生过程；浅谈，开源真不容易

   揭秘，unibest诞生过程；浅谈，开源真不容易 大家好，我是 unibest 作者菲鸽，今天带给大家一篇新文章《揭秘，unibest诞生过程；浅谈，开源真不容易》。 unibest 背景 去年开始我

2. “作为一名学前端的我，如何实现渲染十万条数据？”

   在我的项目中，有时需要展示上万条甚至十万条数据，而如何在保证性能的前提下高效地渲染这些数据成为了我面临的难题。在经过一段时间的摸索和实践后，我积累了一些经验和技巧，现在我将这些分享给大家。

3. Flutter Web 的未来，Wasm Native 即将到来

   早在去年 Google I/O 发布 Flutter 3.10 的时候就提到过， Flutter Web 的未来会是 Wasm Native ，当时 Flutter 团队就表示，Flutter Web

4. flutter-barrage-craft — 能成为pub.dev中最好用的弹幕插件吗？

   Hi，最近我开发了一个弹幕插件，想知道它是否有成为 pub.dev 中最好用的弹幕插件的潜力。能帮我评估一下吗？‍

5. vue3:reactive,ref,toRefs,computed的使用

   文章浏览阅读86次。3.computed:计算属性 里面的依赖项变化的时候才会更改，缓存优化。2.toRefs的作用:使从reactive定义的结构数据变成响应式的。代码示例：这里顺便用了Element-plus 里的form 双向绑定。ref能指定基础类型和复杂类型，reacive不能指定基础类型。

6. Flutter实现酷狗歌词逐字上色的效果

   Flutter巧妙实现酷狗歌词逐字上色的效果，利用TextStyle的`foreground`属性，定义一个渐变，基于渐变创建着色器`Shader`复杂给`foreground`

7. 跃然纸上的灵感再现，手绘风格的开源绘图白板工具：Excalidraw

   Excalidraw：即绘即思，直观呈现未来流程图！- 精选真开源，释放新价值。 概览 在撰写文章或构建演示案例的过程中，为了增强视觉表现力和信息传达深度，适时融入图表或图形显得至关重要。Excali

8. 拖拉拽做游戏？轻松打造个人掌机世界 | 开源日报 No.176

   gb-studio 是一个快速、易于使用的拖放式复古游戏创建器，适用于您最喜爱的掌上游戏机系统。 该项目主要功能、关键特性和核心优势包括： – 快速且易于使用 – 使用 Electron 游戏构建应

9. 前端视频处理利器：ffmpeg.wasm网页中预览非mp4视频并嵌入字幕

   借助ffmpeg的wasm版本，可以实现本地网页处理视频、预览非mp4格式的视频等，最近用到了视频中分离音频、预览视频、截取分割等功能，简单记录下。 获取 ffmpeg.wasm 首先需要执行npm以

10. GitHub Copilot 在命令行界面中的全面应用：为系统运维人员带来的革命性进步

11. 对比：React 还是 Vue

    文章浏览阅读434次，点赞19次，收藏11次。随着 Vue、React 的演进，其各自框架的基本形态和功能已经很完备，最根本差异点逐渐演变成了框架开发者各自的理念差异，不同的理念让框架有了各自的设计模式和最佳实践。然而，对于使用者来说，搞懂其设计模式、沉淀其最佳实践、了解其基本原理，是掌握一门框架的捷径，也是衡量对其熟悉程度的标尺。Vue 更贴近传统前端开发方式，更符合人的直觉，更易上手更简单；React 让函数变得更加复杂，使用者有更大的控制权，更加灵活，从而优雅。

12. 前端 Vue3 音视频播放技术实践分享

13. Redis开源协议变更Garnet：微软开源代替方案?

14. 大屏页面崩溃排查（Too many active WebGL contexts. Oldest context will be lost）

15. 备忘录 3.Vue2,3以及React父子组件组件传值的方法(1)

    文章浏览阅读208次。在初次接触组件传值时总是忘了其中的细节,我会在这个文章中简单的写一下在vue2,3中父子组件最常用的传值方式,便于我开发中查阅

16. React尚硅谷103-114(react-redux,优化redux,devtools,纯函数)

    文章浏览阅读363次，点赞14次，收藏13次。render() {//ui组件接收到的propsreturn (

17. React-2-useState-获取DOM-组件通信

    文章浏览阅读254次，点赞2次，收藏3次。本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化**（数据驱动视图）**useState 是一个 React Hook（函数），它允许我们向组件添加一个。在 React 组件中获取/操作 DOM，需要使用。，不能直接进行修改, 父组件的数据只能由父组件修改。在React中，状态被认为是只读的，我们应该始终。数字、字符串、布尔值、数组、对象、函数、JSX。, 从而控制影响组件的渲染结果。，直接修改状态不能引发视图更新。props可传递任意的数据。vue中的双向数据绑定。

18. Vue项目登录页实现获取短信验证码的功能

    文章浏览阅读114次。现在我们管理后台有个需求，就是登录页面需要获取验证码，用户可以输入验证码后进行登录。之前我们写过不需要调后端接口就获取验证码的方法，具体看。

19. 【React】基于JS 3D引擎库实现关系图(图&graph)

    文章浏览阅读186次，点赞2次，收藏2次。3D Force-Directed Graph图实战样例笔记

20. vue+Nodejs+Koa搭建前后端系统（十）–实战之更新用户信息

    文章浏览阅读303次，点赞3次，收藏4次。本篇为实战篇，干货不多。基于上篇实现的上传图片接口，可以实现下更新用户信息功能，实现后的前端效果如下图：代码如下：1.修改http.ts文件代码：2.修改Pinia仓储3.头像下拉弹窗中链接列表数据顶部用户头像下拉弹窗区域自定义弹窗组件先写一个通用的弹窗组件，有利于弹窗行为的统一性，本组件采用了animate动画，所以需要引入一下animate.css1.安装animate.css2.引入animate.css3.编写通用的弹窗组件通用弹窗组件写完，就可以写具体的弹窗了4.设置型弹窗组

21. Nodejs + WebSocket + Vue 实现多人聊天室- 第二章

    文章浏览阅读481次，点赞6次，收藏17次。前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）[外链图片转存中…(img-mz1j7osV-1711949792280)]

22. vue3 i18n国际化，普通js，ts文件中的设置方法

    文章浏览阅读81次，点赞3次，收藏2次。项目环境：vue3 + ts + element plus + i18n。

23. Vue3 – AntDesignVue 实现 动态面包屑 带 icon 图标

    文章浏览阅读242次。Vue3 – AntDesignVue 实现 动态面包屑 带 icon 图标。

24. Vue 下载 Excel 文件，抖音音视频开发

    文章浏览阅读548次，点赞9次，收藏19次。break;return out;if (!i < len;if (!!;== “”?