Vue周报:Vue 2 最后之舞!Nuxt 3.9 官宣。Pinia竞品(53期)

3 阅读4分钟

大家好,这里是大家的林语冰,您现在收看的是第 53 期、同时也是今年最后一期的《Vue 技术周报》,谨献给不断给 up 主一键三连和拥抱 Vue 生态的铲屎官们。

视频解说请传送 Vue 技术周报@bilibili

每周必看

(译)Vue 2 最后之舞:鸿鹄挽歌

01-swan.png

圣诞节前夕,平安夜之际,Vue 团队正式官宣 —— Vue 2 最后一个补丁版本 2.7.16 正式发布,版本代号“Swan Song”(天鹅挽歌),之后 Vue 2 正式停止开源维护,此处经年,再无 Vue 2。

Vue 2 上一个、也是最后一个次版本 Vue 2.7(“火影忍者”)已经时过境迁,Vue 团队认为已经给用户足够长的时间从 Vue 2 渐进升级到 Vue 3,如果仍有 Vue 2 的企业级需求,Vue 团队也提供了相关的企业付费方案。

up 主已经翻译好了 Vue 2.7 的官方博客,想要温故知新的小伙伴欢迎扫码阅读。


(译)Nuxt 3.9 官宣升级

02-nuxt.png

新年将至,Vue 周边生态也元气满满,辞旧迎新。

Nuxt 团队官宣 v3.9 正式发布,此乃 Nuxt 团队的圣诞礼物,亮点功能包括但不限于:

  • 支持 Vite 5
  • 支持 Vue@3.4 最新版本
  • 交互式服务器组件

Vue 爱好者

揭秘 Vue provide/inject 的魔力

03-inject.png

这是 Vue 大学的一篇官方博客。

Vue 有一个小众但给力的功能 —— provide/inject(依赖注入)机制,它允许组件直接跨层级与其后代通信和共享数据,而不像 props down/events up 那样逐级透传。

这位大佬科普了依赖注入机制的最佳实践和注意事项,虽然这在组件库中可以实现主题全局配置等功能,但也要避免过度使用。


规避 Vue 开发的常见错误

04-bug.jpeg

这位大佬科普了 Vue 开发中的若干误区,辅助您理解并避免这些常见陷阱,减少开发的挫败感。

这是 Vue 常见错误的系列博客之一,本文主要共享了使用 v-for 时省略 key 属性的问题,避免使用索引作为 key,id 和标签结合等。


watch vs watchEffect

这位大佬科普了 Vue 3 watchwatchEffect 这两个组合式 API 的异同点,这也是一道回头率超高的 Vue 面试题。


(会员)告别 Mixin,拥抱组合式函数

05-mixin.png

Vue 3 引入了组合式函数作为组件共享和复用逻辑的新方案,主要是为了解决 Vue 2 mixin 的限制,包括但不限于:

  • 属性来源不明
  • 命名空间冲突
  • 模块化增强

这位大佬建议告别 mixin,拥抱组合式函数。

这是一篇会员可观看的高质量博客,有相关翻译资源的小伙伴欢迎在下方群聊共享链接。

Pinia 爱好者

Vue Query vs Pinia

React 生态存在一种 React Query 的状态管理,如今 Vue 生态也孵化了自己的 Vue Query。

这位大佬科普了 Vue Query 和 Pinia 的异同点,重点解释了为什么 Vue Query 可能是比 Pinia 管理服务器状态的更好选择。

Nuxt 爱好者

基于 Nuxt Content 构建测验 App

06-content.jpg

这个系列的博客科普了如何使用 Nuxt Content 构建测验 App。

第一篇博客将重点介绍使用 Nuxt Content 渲染某些具有基本交互性的自定义测验组件,之后将深入探讨如何使用数据存储模式添加动态评分等功能。


使用 Nuxt Monorepo 重构大型 Vue App

Monorepo 架构最近越来越流行,Vue 3 的核心库就是使用 Monorepo 构建的。

这位大佬科普了使用 Nuxt 和 Monorepo 开发大型的 Vue App,无论是 SSR/SSG/SPA,Nuxt Layer 都是优秀的 Vue Monorepo 技术方案。

程序员名言

任何高效的软件工程,不仅仅指面向可靠性的工程,其中一个关键原则是大道至简,这种特性机不可失时不再来

—— 《SRE:Google 运维解密》

07-quote.png

程序员笑话

Hello World 很骨感,现实开发很丰满。

08-fun.png

Vue 小技巧:强制 Vue 组件重新渲染的最佳实践

如果您需要强制重新渲染 Vue 组件,那么您大概率会遭遇 Vue 响应性系统的问题。根据本人的经验,您可能会犯错,且没有正确使用 Vue 的响应性系统。

虽然但是,在某些情况下,强制重新渲染组件确有必要。举个栗子,当您使用的第三方库与 Vue 的响应性系统无法“梦幻联动”时。如果第三方库直接修改 DOM,且没有提供通知 Vue 变更的方法,那就必须强制重新渲染组件。

让我向您表演使用 key attribute 强制重新渲染 Vue 组件的正确打开方式:

09-key.png

每次调用 forceRender 都会更改 componentKey 值,该值作为 key 属性添加到 MyComponent 中。Vue 会识别出此变化,销毁旧的组件实例,并创建一个新的组件实例。

您现在收看的是《Vue 技术周报》系列,学废了的小伙伴可以订阅专栏合集,我们每周五佛系投稿,欢迎持续关注 Vue 开源技术。谢谢大家的点赞,掰掰~

26-cat.gif