大家好,这里是大家的林语冰,您现在收看的是 2023 年第 44 周 Vue 官方的技术周报。
免责声明
本文属于是语冰的直男翻译了属于是,仅供粉丝参考,视频解说请临幸 人猫神话@bilibili,英文原味版请临幸 Weekly Vue News。
Vue 技术栈

"无渲染组件(Renderless Components)通常适用于为子组件提供某些功能,而组合式组件(Composables Components)适用于为一个或多个组件提供有状态逻辑。"
当开发表单时,根据选中选项显示和隐藏各种字段的需求司空见惯。
本文解释了在 @vuejs 中按需显示或隐藏表单元素的方法。
在本视频中,您将学习诉诸 VUe 3 及其组合式 API 以使用计算属性、事件、fetch 请求和 emits(发射)来构建组件,该组件的行为类似于过滤器和搜索表。
NativeScript-Use/Vue 基于 VueUse,它是 NativeScript-Vue3 的工具集。
Nuxt 技术栈

本文将辅助您理解 SSG(静态网站生成) app 的问题,使用 ISR(Incremental Static Regeneration)解决这些问题的方法,在 Nuxt 中实现 ISR 以及自定义 Nuxt 的渲染来满足您的需求的方法。

在本文中,您将了解 Nuxt 3 app 的性能,以及利用其超能力来优化 app 性能的方法。
我们中的大多数人不得不从 CMS 或 API 嵌入 HTML。虽然但是,锚标签会重载整个页面。
在自定义指令的辅助下,您可以让锚标签拥有类似 NuxtLink 组件的行为!
多人活动

2023 年 11 月 9-10 日,加拿大多伦多
完整流程请临幸 http://vuetoronto.com/schedule。

2024 年 2 月 28-29 日,阿姆斯特丹
热评圣经
程序员的"成人礼"在于 ------ 当你意识到你一顿操作的代码毫无卵用时,你愿意果断白给及时止损。

Vue 奇技淫巧:动态插槽名
在这个 Vue 奇技淫巧中,我想向您表演在 Vue 中使用动态插槽名的方法。
这适用于诸如 多步表单(multi-step form) 或 图表组件(table component) 等应用场景。
让我们来瞄一眼在运行时动态生成插槽的方法:

在您的父组件中,您现在可以使用 v-slot:[item.name]
语法为 items
数组中的任意元素动态生成插槽名:

除了 v-slot:[item.name]
,您还可以使用 #[item.name]
简写。
请在下面的 StackBlitz 项目中自己练习:
前端梗图

周边资讯

诉诸 WebAssembly 和 Web 组件赋能。
网络现在已经足够给力,可以处理鲁棒的图像编辑器 Photoshop。

聚合文件(Barrel 文件)通常会导致 JS 项目中的性能问题,大型项目尤其如此。
消灭聚合文件可以使一大坨任务运行优化 60-80%。

若干最佳实践,包括但不限于设置安全 HTTP headers、实现速率限制和强制执行强身份验证策略。

瞄一眼某些当代测试策略并评估著名的测试金字塔的相关性。

一本关于 cookies 的优秀指南,值得一读。
在这个免费的 6 小时 VS Code 教程中,您将学习内置功能,最佳设置/扩展和工作流的使用方法,解放您的生产力。
一个虚拟 DOM 选择库。
可以直接使用或与 React 或 Vue 集成。
您现在收看的是 Vue 官方周报,学废了的小伙伴可以点赞友情赞助本系列,我们礼拜天佛系拖更,欢迎关注和订阅最新动态。谢谢大家的彼芯,掰掰~