获得徽章 25
- 最近掘金上有很多人诋毁 Element Plus，然后推荐自己家的组件库，但从源码研究价值来说，还是 Element Plus 源码比较有研究价值!
首先 Element Plus 一直采用 SFC 组件，这是 Vue 官方本身推荐的使用模式，因为 template 模板模式相对于 JSX 具有编译优化的优势，也是平时大家使用比较多的模式，如果说喜欢 JSX 模式的，可以直接使用 React，因为 React 是运行时优化，而 Vue 是编译时优化，template 才能发挥出 Vue 的最大功效。其次是 Element Plus 采用的是 pnpm 的 monorepo 架构，这是最先进的 monorepo 架构。
再者在打包方面，ant-design-vue 采用的是 webpack，而 Element Plus 采用是 rollup，rollup 是现代库采用最多的打包工具，其外还涉及到的知识点：npm 包的原理以及 npm install 的原理，接着是 .vue 文件的编译原理，rollup 的使用，ESM、CommonJS、UMD 等模块规范，只有熟悉这些才能打好包。展开等人赞过
49 - 关于 CSS 函数 calc 的一些使用心得，本人一般是在一些布局场景中会经常用到 calc 函数，特别是那种一屏界面的，就是屏幕多大，界面就多大，这种布局要求非常适合 CSS calc 函数的发挥了，通常搭配 100% 来使用，那么就又引出了另一个知识点，在 CSS 中 100% 的问题，在 CSS 中 width 和 height 的百分比是指父元素的 width 和 height 的百分比，也就是基于包裹它的父元素的宽和高来计算的。
此外在 CSS 中使用到百分比比较多的地方就是 line-height 了，line-height 的百分比则是根据字体 font-size 来计算的，还有就是 border-radius 了，border-radius 的百分比则参考值是自身的尺寸了。展开赞过 评论1 - 在 if 语句中声明的函数，例如：function a(){}，会被视为函数表达式，而不是函数声明，这就是函数语句，函数语句不是在变量初始化期间声明的，而是在运行时声明的——与函数表达式一样。不过，函数语句的标识符一旦声明能在函数的整个作用域生效了。赞过 11
- #金石计划征文活动#
文本通过由浅入深逐步实现一个前端两大阵营React和Vue都离不开的表单验证工具库 mini-async-validator，旨在在实现的过程中彻底掌握前端的设计模式之策略模式，以及一些重构的手法。赞过 11 - 这是在讶羽大佬的群里问 AI 的回答，就目前来说在专业知识领域，AI 还是在胡说八道。
我对这个 “为什么 React 的 Diff 算法不采用 Vue 的双端对比算法？” 问题再次作了一个小小的总结：
Vue2、Vue3 的 Diff 都有双端对比，都是两边往中间靠拢，Vue2 多两个首尾，和尾首的比较，剩下的部分 Vue2 和 Vue3 的处理就不一样了，剩下的部分 Vue3 就采用最长递增子序列算法处理，Vue2 则是暴力地一个一个处理。
React 的 Fiber 是一个单向链表结构，简单来说，就是只能从左往右处理，先处理简单的情况，处理完了，剩下的部分跟 Vue2 一样，也是暴力地一个一个地处理。
在这个过程，key 除了用来比较新旧节点是否相同之外，还有一个重要的作用，无论 Vue2、Vue3 还是 React 在处理完简单的部分之后，剩下的复杂部分，都是通过 key 来进行以空间换时间的操作，如果没设置 key ，则需要O(N²)的时间复杂度，有了 key 之后，就单单确定新老节点这一环节的时间复杂度直接变成了 O(1)。
此外，Vue 和 React 的 diff 都是自上而下，深度优先，我以前也曾在掘金上写过一篇文章专门探讨过这个问题。
本人水平有限，如有错漏，欢迎各路大神斧正。
文章地址：
juejin.cn 展开等人赞过 评论5
juejin.cn