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 开源技术。谢谢大家的点赞,掰掰~

相关推荐
Myli_ing34 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风37 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave44 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng18401 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架