大家好,这里是大家的林语冰,您现在收看的是第 53 期、同时也是今年最后一期的《Vue 技术周报》,谨献给不断给 up 主一键三连和拥抱 Vue 生态的铲屎官们。
视频解说请传送 Vue 技术周报@bilibili。
每周必看
圣诞节前夕,平安夜之际,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 的官方博客,想要温故知新的小伙伴欢迎扫码阅读。
新年将至,Vue 周边生态也元气满满,辞旧迎新。
Nuxt 团队官宣 v3.9 正式发布,此乃 Nuxt 团队的圣诞礼物,亮点功能包括但不限于:
- 支持 Vite 5
- 支持 Vue@3.4 最新版本
- 交互式服务器组件
Vue 爱好者
这是 Vue 大学的一篇官方博客。
Vue 有一个小众但给力的功能 ------ provide/inject
(依赖注入)机制,它允许组件直接跨层级与其后代通信和共享数据,而不像 props down/events up
那样逐级透传。
这位大佬科普了依赖注入机制的最佳实践和注意事项,虽然这在组件库中可以实现主题全局配置等功能,但也要避免过度使用。
这位大佬科普了 Vue 开发中的若干误区,辅助您理解并避免这些常见陷阱,减少开发的挫败感。
这是 Vue 常见错误的系列博客之一,本文主要共享了使用 v-for
时省略 key
属性的问题,避免使用索引作为 key
,id 和标签结合等。
这位大佬科普了 Vue 3 watch
和 watchEffect
这两个组合式 API 的异同点,这也是一道回头率超高的 Vue 面试题。
Vue 3 引入了组合式函数作为组件共享和复用逻辑的新方案,主要是为了解决 Vue 2 mixin
的限制,包括但不限于:
- 属性来源不明
- 命名空间冲突
- 模块化增强
这位大佬建议告别 mixin
,拥抱组合式函数。
这是一篇会员可观看的高质量博客,有相关翻译资源的小伙伴欢迎在下方群聊共享链接。
Pinia 爱好者
React 生态存在一种 React Query 的状态管理,如今 Vue 生态也孵化了自己的 Vue Query。
这位大佬科普了 Vue Query 和 Pinia 的异同点,重点解释了为什么 Vue Query 可能是比 Pinia 管理服务器状态的更好选择。
Nuxt 爱好者
这个系列的博客科普了如何使用 Nuxt Content 构建测验 App。
第一篇博客将重点介绍使用 Nuxt Content 渲染某些具有基本交互性的自定义测验组件,之后将深入探讨如何使用数据存储模式添加动态评分等功能。
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 开源技术。谢谢大家的点赞,掰掰~