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”的资金沉淀公式源码著名开源作者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~~~
这可太简单易用了！亲人们，给我买！！（误）
经过源码阅读，我们可以发现，这短短的yzmcms管理系统源码一个方法，至少做了以下这些事：
如果这些逻辑放到页面里，至少需要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 的新特性和使用方法，后续文章将通过具体代码示例深入探讨。敬请持续关注，共同学习进步。