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

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

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

每周必看

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

圣诞节前夕,平安夜之际,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 官宣升级

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

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

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

Vue 爱好者

揭秘 Vue provide/inject 的魔力

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

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

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


规避 Vue 开发的常见错误

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

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


watch vs watchEffect

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


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

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

这个系列的博客科普了如何使用 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 运维解密》

程序员笑话

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

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

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

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

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

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

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

相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js