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

相关推荐
gqkmiss25 分钟前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255023 小时前
前端常用算法集合
前端·算法
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2344 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1234 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~5 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语5 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport5 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap