皮皮网

1.vueԴ?概多??Ŷ?????
2.vue3实用工具mini-vue｜阮一峰推荐
3.vue进阶之路 —— vue3.0新特性

vueԴ???Ŷ?????

       摘要：一款基于Vue组合式API的函数工具集。

       本文分享自华为云社区《vueuse:我不许身为vuer的少行前端,你的工具集只有lodash!》，作者：前端要摸鱼。概多

       vueuse 是少行什么？一款基于Vue组合式API的函数工具集。

       以上是概多官方网站关于它的定义。

       首先，少行新世纪建站源码它基于Vue Composition Api (组合式API)，概多只有在支持组合式API的少行环境下，才可以正常使用它；什么是概多组合式API？

       然后，它是少行一款函数工具集（可类比为lodash.js/ramda.js）；

       简单来说，这是概多一个能让你更早下班的工具库。

       vueuse 开源吗？现状如何？当然开源！少行github/vueuse

       star数：6.3K

       社区活跃度：社区非常活跃，概多截止年月，少行一直有mr被合入主线；

       被引用情况：截止年月日，概多npm上可查询到依赖它的库就有个，其中包括著名UI库：Element-Plus

       那位常年被调侃“懂个锤子Vue”的无源码 fuzz著名开源作者Evan You也是此库的金牌赞助商；

       安装 vueuse

       注： VueUse 借助 vue-demi 的强大功能,可以在一个包中同时适用于 Vue 2 和 3！

       Vue 3 Demo: 使用vite: github.com/vueuse/vueus...

       使用Webpack: github.com/vueuse/vueus...

       Vue 2 Demo: Vue CLI

       使用Vue CLI: github.com/vueuse/vueus...

       另外，要注意库的版本：

       从v6.0版本起，vue3 需要 vue >= v3.2; vue2 需要依赖@vue/composition-api>@vue/composition >= v1.1

       vueuse 能做什么？能做的那可太多了，但总体上分为以下几个类别提供工具函数：

       这么列了一遍，估计你还是很懵，但因为方法实在太多，也不可能一个个都列出来。

       那我就举几个有代表性的例子，带你快速理解这些方法大概是做什么的，有什么特点；

       例子1: useMouse

       效果：

       Wooooow~~~

       这可太简单易用了！亲人们，给我买！！（误）

       经过源码阅读，我们可以发现，这短短的memmove汇编源码一个方法，至少做了以下这些事：

       如果这些逻辑放到页面里，至少需要6行代码，这些代码后期都会增加维护人员理解页面的成本；

       而现在，你只需要一行代码；

       除此之外，该方法还有组件式用法，适合更热爱标签的盆友

       例子2: useInterval

       顾名思义，这个方法是对延时重复调用能力的封装；

       看看效果：

       是不是很好用？相比手写setInterval更为便捷。

       如果徒手实现这样一个套方法，多少行暂且不说，我们需要在业务中写下大量的逻辑代码。

       而众所周知：

       写的代码越多，出Bug的可能性越大，维护和理解的难度就越高。

       从这个角度看，这个库确实是一个合格的函数工具集；

       例子3：useVModel

       这是一个给经常封装组件的小伙伴的大好利器。

       先创建一个组件：Test.vue

       接着，朔源码大在index.vue中使用它

       对于有组件封装需求的朋友，这个方法墙裂推荐！

       不用再为了单项数据流的组件封装，而写在组件内写冗余的代码了。直接将useVModel返回的数据作为响应式对象用即可。

       这可太得劲儿了~~

vue3实用工具mini-vue｜阮一峰推荐

       欢迎各位开发者，今天我要介绍一个专为学习 Vue3 源码设计的利器——mini-vue，此工具由我开发并推荐，阮一峰老师在第期周刊中也推荐了它。mini-vue旨在让学习者快速了解 Vue3 核心逻辑，通过减少非核心逻辑的干扰，使代码更具可读性。

       Vue3作为热门技术，其源码复杂度高，代码量大，理解起来让人头疼。书评网站源码特别是在`renderer.ts`中的`baseCreateRenderer`函数，代码量接近行，这对于初次接触的同学来说是一个巨大的挑战。如何有效阅读和理解如此庞大的代码？通过分而治之的方法，我们专注于核心逻辑，忽略边缘情况和特定环境的逻辑，从而更高效地理解 Vue3。

       mini-vue正是基于这一思路设计的，它仅包含 Vue3 的核心功能，帮助开发者在理解复杂代码时聚焦关键点，提高学习效率。为了帮助大家快速上手，我在代码中添加了详细的注释，清晰记录了每个函数的行为。同时，关键路径上设有`console.log`，在调试时提供清晰的运行流程视图。

       使用 mini-vue 时，可以先从`example`目录下的示例开始，通过`console.log`查看代码运行过程，阅读注释理解代码逻辑，然后深入源码细节，如`props`和`children`的处理方式。通过与Vue3源码对照，可以更快速地掌握核心功能。

       为了验证学习成果，可以尝试自己实现mini-vue中的功能，这是一个极佳的学习方式，能加深对代码的理解和记忆。mini-vue的使用教程可在视频版本中找到，详细的项目结构包括`example`、`lib`和`src`文件夹。开始时，从`example`中的示例开始，逐步深入了解核心流程。

       在掌握mini-vue后，阅读Vue3源码将变得更加轻松。感谢使用mini-vue，如能给予支持，通过在GitHub上star或参与issue讨论，将为我的项目提供更多动力。我将持续更新和完善mini-vue，以帮助更多前端开发者。期待与大家共同进步，共享学习的喜悦。

       作者：花果山瑞哥

vue进阶之路 —— vue3.0新特性

       自从月5日尤大大宣布了 Vue 3.0 的源码，并预计在年后发布正式版本以来，前端社区迎来了国庆期间最大的新闻。尽管此前对 Vue 3.0 的讨论众说纷纭，但既然正式发布了，且明年的开发框架迁移似乎指日可待，是时候开始深入学习这一新版本了。

       Vue 3.0 的设计目标主要体现在以下方面：

       1. **压缩包体积减半**：当前 Vue 运行时最小化并压缩后的大小约为 kB，Vue 3.0 的捆绑包大小将减少一半，只需kB，显著降低了部署和加载成本。

       2. **从`Object.defineProperty`到`Proxy`**：Vue 3.0 将`Object.defineProperty`替换为更高效的`Proxy`，通过在目标对象之上建立一层拦截，代理整个对象而非其属性。这不仅提高了解析性能，还使得对象结构更稳定，优化性更高。

       3. **重构Virtual DOM**：Virtual DOM 的本质是描述界面渲染状态的抽象层。Vue 3.0 通过优化，将更新性能从与模版整体大小相关改为与动态内容数量相关，显著提升了性能。

       4. **编译时优化**：Vue 3.0 在编译阶段引入更多优化策略，进一步提高性能和效率。

       5. **采用 Function-based API**：Vue 3.0 弃用了 Class API，转而采用 Function-based API，这一变化旨在更好地支持 TypeScript，并提供更灵活的逻辑复用。

       Function-based API 带来了一系列优势，包括但不限于更好地与 TypeScript 集成、支持静态的导入和导出、允许更灵活的逻辑复用等。

       在使用 Function-based API 时，Vue 3.0 引入了新的组件逻辑编写方式，如`setup()`函数取代了`data()`，`value`包装器简化了值的传递与追踪，以及计算属性等。这种新的API结构不仅使代码更易于理解和维护，还与 TypeScript 更好地兼容。

       Vue 3.0 的改进旨在解决 Vue 2.x 中的一些局限性，如混合使用和高阶组件的复杂性，通过 Function-based API 提供更简洁、高效且易于维护的组件开发方式。

       为了更好地理解 Vue 3.0 的新特性和使用方法，后续文章将通过具体代码示例深入探讨。敬请持续关注，共同学习进步。