【译】Vue 官方周报:前端比后端难?Vue Suspense 实验组件!免费编程资源(2023 年第 38 周)

大家好,这里是大家的林语冰,您现在收看的是 2023 年第 38 周 Vue 官方的技术周报。

免责声明

本文属于是语冰的直男翻译了属于是,仅供粉丝参考,视频解说请临幸 Vue 官方周报@bilibili,英文原味版请临幸 Weekly Vue News

Vue 技术栈

Vue Suspense 完全示例指南

这份综合指南涵盖了 Vue Suspense。

Vue Suspense 可以让您轻松处理异步组件,并在组件加载时提供更好的 UX(用户体验)。

在 Vue Suspense 之前,当组件加载时,用户可能会看到白屏,UX 不佳。Vue Suspense 是 Vue.js 2.6 中引入的一项强大功能,允许您通过管理异步组件及其加载状态来优化 UX。Suspense 目前仍是一项实验性功能,很多 Vue 初学者可能还没使用过这个内置组件。如果您对 Vue Suspense 感兴趣,强烈推荐此博客。


防止跨组件的重复 API 请求

在本文中,Jason 简述了该场景,解释了该挑战,并引导您实现防止重复 API 调用的代码。

重复请求可能会导致若干问题,包括但不限于性能影响、冗余数据检索和资源浪费等。


在 Vue 中引入原子设计

在本文中,您将探讨只诉诸 HTML 在 Vue 中实现原子设计的方法。

它解释了原子设计的基础知识,然后演示了如何在 Vue 中应用其原理。

原子设计是一种创建设计系统的方法论,它将用户界面分解为迷你的可重用组件,包括但不限于原子、分子、生物体、模板和页面。原子设计的好处包括但不限于一致性、可扩展性、可维护性和可复用性。如果您对 Vue 的原子设计感兴趣,强烈推荐此博客。


AbortController:使用 Axios 拦截器中止 Vue 正在进行的调用

了解如何使用 Axios 中止 Vue 正在进行的调用。

假设您的 App 用户可以在短时间内进行多次 API 调用,但您只想显示最后一次调用的结果。之前正在进行的请求变得无关紧要。在这种情况下,您可以利用 Axios 拦截器。


Histoire

Histoire 是一个用 Vue 编写的生成故事 App 的工具(类似于 Storybook)

由 Vite 驱动,速度更快。


Headless UI

完全无样式、完全可访问的 UI 组件,旨在与 Tailwind CSS 完美集成。

适用于 Vue 和 React。


Vue for Cesium

Vue3 筑基的 CesiumJS 组件库,用于 3D 地理空间可视化。

挨踢圣经

任何傻瓜都会写计算机能懂的代码。优秀的程序员则会写人类秒懂的代码。

Nuxt 小技巧:兼容服务端和客户端的 URL 对象

有时您需要读写 Nuxt App 中的当前 URL 对象。举个栗子,您可能想要读取当前路径或查询参数。

如果您使用 SSR(服务端渲染),您的代码将在服务器和客户端执行。这意味着,您需要确保代码可以同时在服务器和客户端上运行。举个栗子,您不能在服务器上使用 window 对象。

一个简单的解决方法是添加 if 语句来检查 window 对象是否可用:

这能奏效,但不是很优雅。如果我们可以在服务器和客户端上使用同款代码,那就更好了。

幸运的是,Nuxt 提供了一个名为 useRequestURL 的辅助函数,它返回一个兼容服务器端和客户端工作的 URL 对象:

前端梗图

周边资讯

前端比后端难

一位 Hacker News 评论者认为前端开发比后端开发更难。

其他人加入群聊,并给出自己的自由言论和个人心证。

举个栗子,有道友留言评论,React 已经过时了,帅小伙现在正在使用 Svelte 或 Qwik。


11 中有毒的 PR(统计 4.5 万个代码分支)

"在审查了数百万个 PR(Pull Request)后,我们发现了 11 个拖累工程团队的 PR。"

在软件交付领域,PR 是团队协作的核心。虽然但是,PR 也成为了开发工作流中的主要瓶颈。LinearB 分析了 2,000 个开发团队和 450 万个代码分支的工作,统计了 11 种有毒的 PR,包括但不限于迷你 PR 泛滥交,过时代码 PR,无文档 PR 等。


JS async/await 的内部原理

本文从零开始在 JS 中实现 async/await

这位大佬认为 async/await 乃 Promise 的语法糖,所以理论上应该可以诉诸 JS 模拟 async/await 图灵等价的功能,整体思路和《ES6 入门》大抵相同,私以为唯一的不完美之处在于没有模拟 generator 语法。


何时在 TS 中使用 never 和 unknown

本文深入探讨了 TS(TypeScript)的类型。


从 Webpack 迁移到 Vite 的指南

与 Webpack 相比,Vite 在开发时可以提供更快的构建时间和热重载时间。

但您应该考虑到 Webpack 是一个更成熟的工具,而 Vite 仍在成长。

Vite 是最新的前端开发工具,其受欢迎程度和采用率正在大幅增长。它完美利用现代浏览器功能(比如浏览器中的 ES 模块)。如果您对 Vite 的进化简史和未来规划感兴趣,稍后可以观看 UP 主翻译的"Vite 之父"尤雨溪先生的 最新演讲


freeCodeCamp Press 简介:面向开发者的免费书籍

freeCodeCamp 已经出版了数十本完整的书籍和手册。

多年来,freeCodeCamp 社区已经发布了 10,000 多篇教程,同时将出版更多 5,000 字以上的手册和 40,000 字以上的完整书籍,包括但不限于 CSS、JS、GO、java 等相关书籍。

友情赞助

您现在收看的是 Vue 官方周报,学废了的小伙伴可以订阅专栏合集,我们每周三佛系投稿,欢迎持续关注前端生态。谢谢大家的点赞,掰掰~

相关推荐
霍先生的虚拟宇宙网络11 分钟前
webp 网页如何录屏?
开发语言·前端·javascript
温吞-ing13 分钟前
第十章JavaScript的应用
开发语言·javascript·ecmascript
彪82514 分钟前
第十章 JavaScript的应用 习题
javascript·css·ecmascript·html5
程序媛-徐师姐1 小时前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
Myli_ing2 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风2 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave2 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟2 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript