【译】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 官方周报,学废了的小伙伴可以订阅专栏合集,我们每周三佛系投稿,欢迎持续关注前端生态。谢谢大家的点赞,掰掰~

相关推荐
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
m0_748254885 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
噢,我明白了6 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
sanguine__6 小时前
APIs-day2
javascript·css·css3
苹果醋36 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计
关你西红柿子6 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根7 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
小木_.7 小时前
【python 逆向分析某有道翻译】分析有道翻译公开的密文内容,webpack类型,全程扣代码,最后实现接口调用翻译,仅供学习参考
javascript·python·学习·webpack·分享·逆向分析