20230927 前端开发日报

Vue2、Vue3 和 React 中 Diff 算法的区别；从0开始学习vue第三节，计算属性与侦听器；结合Mockjs与Bus事件总线搭建首页导航和左侧菜单；[React] react-hooks如何使用；ECMAScript 6（简称ES6）代码探讨；React系列：从高阶组件到Hooks的前端进化；【Vue2.0源码学习】生命周期篇-挂载阶段(mount)；3D世界Babylon.js的横空出世

1. Vue2、Vue3 和 React 中 Diff 算法的区别

   DOM diff 本质上就是在数据响应式的场景下，降低了用户对 DOM 的直接操作。Vue2、Vue3 和 React 底层都有用到 DOM diff，它们的相同点呢，都是同级比对，复杂度差不多；那不同点呢，一个是节点移动的方向。比如 React 是从左向右移动，而 Vue2 是双端 diff,也就是指针是两边向中间移动的。而 Vue3 在 Vue2 双端 diff 的基础上，加上了最长递增子序列优化算法。

2. 从0开始学习vue第三节，计算属性与侦听器

   通过控制台打印可以看出，计算属性fullInfo对应的方法只被调用了一次，而getFullInfo方法则被调用了三次，因此可以证明通过计算属性能够对数据进行缓存，即相同的输入属性值（参与计算属性运算的data中的属性）的计算属性只会被运算一次，以后再次运算的结果会从缓存中直接获取。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。计算属性的set方法是在直接修改计算属性本身时才会被调用的，当修改参与计算属性计算的属性时，set方法并不会被调用，通过点击例子中的两个button按钮即可证明。

3. 结合Mockjs与Bus事件总线搭建首页导航和左侧菜单

   本文介绍如何利用Vue和Element UI框架搭建一个功能强大的首页导航和左侧菜单，同时结合Mock.js进行模拟数据开发，并通过Bus事件总线实现组件之间的通信。通过学习本文，读者能够快速掌握构建复杂前端应用的技巧，提高开发效率，增加用户体验，期待从中获得实际的收益和有意义的知识。

4. [React] react-hooks如何使用

   react-hooks

5. ECMAScript 6（简称ES6）代码探讨

   这些只是ES6中一些重要的功能，它们使得JavaScript编程更加简单、灵活和强大。随着越来越多的浏览器和JavaScript引擎对ES6的支持，使用ES6编写的代码将成为日常开发的标准。希望本文提供的示例代码和解释能帮助您更好地理解和应用ES6的特性。ECMAScript 6（ES6）是JavaScript的一种标准，引入了许多新功能和语法改进，为开发人员提供了更强大和灵活的工具。本文将探讨ES6中的一些主要功能，并提供相应的源代码示例。

6. React系列：从高阶组件到Hooks的前端进化

7. 【Vue2.0源码学习】生命周期篇-挂载阶段(mount)

   模板编译阶段完成之后，接下来就进入了挂载阶段，从官方文档给出的生命周期流程图中可以看到，挂载阶段所做的主要工作是创建Vue实例并用其替换el选项对应的DOM元素，同时还要开启对模板中数据（状态）的监控，当数据（状态）发生变化时通知其依赖进行视图更新。本篇文章介绍了生命周期中的第三个阶段——挂载阶段。在该阶段中所做的主要工作是创建Vue实例并用其替换el选项对应的DOM元素，同时还要开启对模板中数据（状态）的监控，当数据（状态）发生变化时通知其依赖进行视图更新。

8. 3D世界Babylon.js的横空出世

   在3D Web开发领域，Babylon.js和Three.js被视为两种最流行的JavaScript库，用于创建引人入胜的3D体验。它们都提供了强大的功能和活跃的社区，但它们具有不同的优点和缺点。在这

9. 快2024年了你还在用husky、eslint、prettier来规范前端代码？

   快2024年了，前端代码规范的解决方案翻来覆去还是husky、eslint、prettier、lint-staged、commitlint。更简单的git-validator你不考虑使用一下？

10. Flutter Love 鸿蒙

    针对 OpenHarmony 的 Flutter 版本已经开源，我们来打个包看看，耳边再次传来 遥遥领先 的声音。

11. JavaScript 终于原生支持数组分组了

    在日常开发中，很多时候需要对数组进行分组，每次都要手写一个分组函数，或者使用lodash的`groupBy`函数。好消息是，JavaScript 现在正在引入全新的分组方法：`Object.grou

12. 教你用git命令 从0到1部署到github

    所需环境 环境 git【需要下载哦】 vscode【需要自己下载】 git连接github git从0到1提交流程 进入指定目录 打开git cd 目录名-> 进入目录 或者直接打开文件夹右击，单击G

13. 腾讯一面：除了webContainer之外，还有什么办法能在浏览器上运行node代码

    — theme: cyanosis highlight: atom-one-dark —

14. 玩遍Web中的“选区”和“范围”，下次不要再百度了

    平时没少遇到Selection和Range对象吧？所以你搞清楚他们分别是什么了吗？没有就来好好学习。

15. 【前端工程化-Node.js】Node.js介绍、模块化、模块导入导出语法、npm包管理、同源和跨域

    Node.js 是一个跨平台的 JavaScript 运行环境，主要使用场景有： 编写后端程序：充当服务器，对外提供Web服务（接口、数据、网页资源等） 前端工程化：对代码进行压缩，转译和整合

16. React 实现一个瀑布流组件（TypeScript） 支持宽度响应式，支持任意列数，支持触底加载，良好的TS类型支持

17. 【React_02】使用Axios在React中请求数据

    初学React，为了搞懂如何规范的在react中请求数据，特此以本文记录一下，方便遗忘后复习。 本文参照此文而来，英文尚可的建议阅读原文！原文更细！写得也更好! 本文主要有以下内容： 重点主要在134

18. JS设计模式之代理模式：对象的“虚拟与现实”

    代理模式是一种结构型设计模式，它通过引入一个代理对象来控制对另一个对象的访问或操作。代理对象和真实对象具有相同的接口，客户端代码通常无需关注代理对象和真实对象之间的差异。

19. 使用Class二次封装sequelize （nodejs、next、nuxt操作数据库）

20. CSS mask 与 切图艺术

    相反，有些地方还是更推荐的，特别是那些奇形怪状的 UI，合理的“切图”可以极大地提高布局效率，当然，这里需要一点点技巧，将“切图”和 CSS 现有能力结合起来…

21. 前端新轮子Nue，号称替代Vue、React和Svelte

    新的简约前端开发工具集Nue.js 于周三发布。在 Hacker News 上介绍它时，前端开发者和Nue.js 的创作者Tero Piirainen表示，它是 React、Vue、Next.js、Vite、…

22. 和 Node.js 说拜拜，Deno零配置解决方案

    不知道大家注意没有，在我们启动各种类型的 Node repo 时，root 目录很快就会被配置文件塞满。例如，在最新版本的 Next.js 中，我们就有 next.config.js、esl…