20240312 前端开发日报

TypeScript很麻烦，不想使用；原生 JS 实现简易低代码与 undo&redo 操作、现代 CSS accent-color 强调色、为何避免使用外键与级联操作 | 酱酱的下午茶第310期；【长文】只会 Vue 不会 React ？22 点证明 React 比 Vue3 更简单；面试官问我String能存储多少个字符？；GitHub上5k+ star用ast-grep解决代码重构难题；复盘最近的面试； Size Limit: 从开源项目学习如何为你的业务增加检测报告；一文全面解析 Vue3 el-table 组件二次封装

1. TypeScript很麻烦，不想使用

   最近，我们部门在开发一个组件库时，我注意到一些团队成员对使用TypeScript表示出了抵触情绪，他们常常抱怨说：“TypeScript太麻烦了，我们不想用！”起初，我对此感到困惑：TypeScrip

2. 原生 JS 实现简易低代码与 undo&redo 操作、现代 CSS accent-color 强调色、为何避免使用外键与级联操作 | 酱酱的下午茶第310期

   低代码实践：原生 JS 实现简易低代码 demo + undo、redo 操作，这撤消、重做快给我整懵了 – 查漏补缺，盘点和toggle相关的几个API – 现代 CSS 解决方案

3. 【长文】只会 Vue 不会 React ？22 点证明 React 比 Vue3 更简单

   大家好，我是双越老师。本文我对比 Vue2 Vue3，把 React 22 个基础技能过一遍，看看 React 到底哪里难。也欢迎关注我的【划水AI】项目，使用 React Next.js 全栈开发。

4. 面试官问我String能存储多少个字符？

   面试官问我String能存储多少个字符串？我说内存够大就没有长度限制，面试官说好了，回去等通知吧。 1. String.length方法返回值是int 2. Javac的源码中限制字符>=65535会

5. GitHub上5k+ star用ast-grep解决代码重构难题

   ast-grep是一个基于AST，可以让你用YAML来编写代码重构的工具，本文讲了如何在项目实际场景应用ast-grep进行代码重构

6. 复盘最近的面试

7. Size Limit: 从开源项目学习如何为你的业务增加检测报告

8. 一文全面解析 Vue3 el-table 组件二次封装

   文章浏览阅读331次，点赞9次，收藏6次。然而，数据的 key 作为列名的情况很少（至少在我们这里，一般是使用中文作为列名的），这就需要我们使用可定制的列名，并且，如果我们不想展示某些字段，上面的写法也是做不到的（它会显示数据的所有字段）。这时候，我们只需要一个映射（mapper）就可以解决这些问题。该对象的每一个属性对应每一列的 prop、key，值对应列的列名 label。// App.vue// 定义新的Header结构，key为column的prop/key，value为column的labela: "列a",b: "列b",

9. 字节跳动面试经历，这一篇缓解你的紧张

10. Vue3中我是这样玩Echart的

11. GitHub1s：一秒钟体验VS Code的GitHub代码浏览神器

12. Vue3全家桶 – Vue3 – 【2】声明响应式数据（ref + reactive + toRef + toRefs）

    文章浏览阅读309次，点赞9次，收藏9次。reactive().valuerefreactive// 引入 ref 函数，来声明响应式对象importfrom’vue’// 使用 ref 函数来声明原始类型的数据源，具备响应式letref’Abc’// 更改账号，控制台查看最新值function// 通过 ref 函数声明的响应式数据，需要使用 .value 来获取数据的值+=’=’log// 使用 ref 函数来声明对象类型的数据源：具备响应式letrefsalary7000name’Jack’// 更改员工薪资，控制台查看最新值。

13. Vue3 + antv/x6 实现流程图

    文章浏览阅读170次，点赞3次，收藏5次。流程图

14. 巧妙的 Node.js：Node JS 中的 Node.Clustering

    文章浏览阅读303次，点赞23次，收藏9次。近年来，Node.js变得非常流行。它还能够吸引LinkedIn，Netflix和eBay等大公司。这显示了它的架构功能和效率。扩展应用程序的性能是支持不断增长的客户端数量的重要一步。在Node.js中，群集是一种允许利用基于多核处理器的硬件的技术。默认情况下，Node.js遵循基于单线程事件循环的体系结构。即使计算机具有多个 CPU 内核，默认情况下Node.js也不会使用所有 CPU 内核。它仅将一个 CPU 内核用于处理事件循环的主线程。

15. React.FC介绍

    文章浏览阅读173次，点赞6次，收藏4次。与React.Component（类组件）相比，React.FC（函数式组件）是一个纯函数，不能使用setState，而是使用useState()、useEffect等Hook API。在这个例子中，我们定义了一个名为 MyComponent 的函数组件，它接受一个 MyProps 类型的 props。React.FC是React中的一种函数组件类型，是在TypeScript中使用的一个泛型，FC即Function Component的缩写，表示一个接收props作为输入并返回JSX元素的函数组件。

16. 31.Vue 路由钩子

    文章浏览阅读141次。有的时候，需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。，或者vue-router全局有三个路由钩子;具体使用beforeEach（判断是否登录了，没登录就跳转到登录页）afterEach（跳转之后，滚动条回滚到顶部）

17. Vue3之通过Vue.config.globalProperties注册全局属性

    文章浏览阅读185次，点赞5次，收藏3次。Vue3之通过Vue.config.globalProperties注册全局属性

18. Vue3组件通信的方式

    文章浏览阅读118次。Vue3间组件通信方式

19. 如何写一个react自定义的hooks？

    文章浏览阅读147次，点赞2次，收藏3次。使用过useState，也使用过ahook的useSetState，我们知道useState和useSetState左边赋值的第一个参数是接收初始值的变量和设置变量的方法，这里左边用的是数组解构实现的。所以，这里我们想一下，如何自定义一个hooks，也可以像useState和useSetState那样呢？按我个人的理解，react自定义hooks其实就是个函数，函数里可以使用useState、useSetState、useEffect，可以任意返回结果。

20. 【Vue】实现 vuex 状态持久化

    文章浏览阅读128次，点赞5次，收藏4次。vuex 实现状态持久化，面试高频

21. 使用 React Router Dom 实现路由导航

    文章浏览阅读141次，点赞3次，收藏3次。这篇博客介绍了如何使用React Router Dom库来实现路由导航和组件渲染。通过示例代码展示了如何创建基本的路由结构，并演示了模糊匹配、精准匹配以及重定向功能的实现。同时还介绍了嵌套路由的概念，以及如何在嵌套路由中实现组件的动态渲染。这篇博客旨在帮助读者更好地理解React Router Dom的基本用法和功能。

22. vue2跟vu3的区别

    文章浏览阅读285次，点赞12次，收藏5次。Vue 3 对 TypeScript 的支持得到了改进，包括更好的类型推断、更准确的类型检查以及更好的编辑器支持。Vue 3 在性能方面做出了一系列优化，包括更快的渲染速度、更小的包大小以及更高效的虚拟 DOM。Vue 3 引入了组合式 API，这是一个全新的 API 设计模式，用于更灵活地组织和共享组件的逻辑。Vue 3 引入了 Teleport 组件，用于在 DOM 树的其他部分渲染内容，而不会改变组件的父级关系。Vue 3 支持了片段语法，允许组件返回多个根节点，而不需要额外的 DOM 包装器。