【译】Vue 官方周报：Vue组件复用的三大痛点！TS 已死？JS 验证 URL 新方法~（2023 年第 40 周）

站长

2023年11月28日 13:28 · 阅读数 19

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

免责声明

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

Vue 技术栈

Vue 可复用组件的三大痛点

【译】Vue 官方周报：Vue组件复用的三大痛点！TS 已死？JS 验证 URL 新方法~（2023 年第 40 周）

“在 Vue 中创建实际的可重用组件可能具有挑战性，相关问题包括但不限于：改造现存组件、维护一致性以及依赖和状态管理。”

Vue 的内存泄漏识别和解决方案

【译】Vue 官方周报：Vue组件复用的三大痛点！TS 已死？JS 验证 URL 新方法~（2023 年第 40 周）

本文深入探讨了 Vue app 内存泄漏的原因，以及识别和修复这些 bug 的优秀策略。

使用 Phaser 和 Ionic Vue 构建手游：第一部分

【译】Vue 官方周报：Vue组件复用的三大痛点！TS 已死？JS 验证 URL 新方法~（2023 年第 40 周）

本系列博客将介绍如何使用 Phaser、Ionic Vue 和 Capacitor 来构建您自己的手机游戏并在现实的移动设备上运行祂。

使用 Vue 3、NodeJS、ExpressJS、OpenAI 构建 ChatGPT 2.0

在本视频中，您将学习如何使用 Vue 3、Node.js、Express 和 OpenAI API 构建一个克隆版 ChatGPT。

诉诸 Playwright 和 Vitest 的完美 Vue 测试环境

在本视频中，您将了解如何将您的测试与特定测试框架解耦。

Vue TermUI

【译】Vue 官方周报：Vue组件复用的三大痛点！TS 已死？JS 验证 URL 新方法~（2023 年第 40 周）

Vue.js 筑基的终端 UI 框架，祂允许您轻松构建现代终端 App。

Nuxt 技术栈

如何诉诸错误处理构建坚硬的 Nuxt App

【译】Vue 官方周报：Vue组件复用的三大痛点！TS 已死？JS 验证 URL 新方法~（2023 年第 40 周）

本文探讨了诉诸错误处理构建坚硬的应用程序，防止用户在您的 Nuxt 3 App 中欲求不满。

挨踢圣经

早点测试早点爽，一直测试一直爽。

【译】Vue 官方周报：Vue组件复用的三大痛点！TS 已死？JS 验证 URL 新方法~（2023 年第 40 周）

Nuxt 小技巧：自定义 SPA 加载模板

您可以使用 Nuxt 的客户端渲染模式来创建 SPA（单页应用程序）。在此模式下，Nuxt 能且仅能在客户端渲染 App。这意味着，服务器能且仅能向客户端发送最小的 HTML 文档。然后，客户端会渲染 App 并从 API 中请求数据。

当使用客户端渲染模式时，Nuxt 会显示加载指示器，直到 App 水合（hydrate）为止。加载指示器是一个简单的旋转器。您可以通过创建自定义加载组件来 DIY 加载指示器。

从 Nuxt 3.7 开始，这个加载指示器默认禁用。您需要在 nuxt.config.ts 文件中手动将 spaLoadingTemplate 选项设置为 true 来启动祂：

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false, // 启动 SPA 渲染模式
  spaLoadingTemplate: true // 自 Nuxt 3.7 以来默认被禁用
})

您可以在 ~/app/spa-loading-template.html 中放置自定义 HTML 文件来 DIY 加载指示器。该文件必须包含单个 HTML 元素，这会被渲染为加载指示器。举个栗子，官方文档中引用了以下代码：

<!-- app/spa-loading-template.html -->
<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
<div class="loader"></div>
<style>
  .loader {
    display: block;
    position: fixed;
    z-index: 1031;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: solid 2px transparent;
    border-top-color: #000;
    border-left-color: #000;
    border-bottom-color: #efefef;
    border-right-color: #efefef;
    border-radius: 50%;
    -webkit-animation: loader 400ms linear infinite;
    animation: loader 400ms linear infinite;
  }
  \@-webkit-keyframes loader {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  \@keyframes loader {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
</style>