Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

站长

2023年11月28日 12:47 · 阅读数 47

大家好，这里是大家的林语冰，您现在收看的是第 37 期 Vue 技术周报。

免责声明

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

Vue 技能树

Vue 和 Nuxt 的零和博弈：开发困境

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

Vue 和 Nuxt 之间的选择取决于各种因素和注意事项。

本文深入探讨了这些因素和注意事项。

正如 Next 之于 React，Nuxt 是 Vue 版 Next 的“图灵等价物”。Nuxt 提供了一大坨强大的超能力，包括但不限于 SSR、SSG、CSR、ISR、ESR、SWR 等多体位按需渲染模式，SEO 优化、DX 优化以及强大的插件系统。

Nuxt 是构建 Vue App 的首选框架，但在 Nuxt 和 Vue 的“零和博弈”中，我们使用 Nuxt 和 Vue 的最佳 timing 分别是什么时候呢？

Vue 开发者工具的调试技巧

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

本文深入探讨了如何有效地使用 Vue Devtools 来简化调试。

Vue Devtools 是一个强大的调试工具，它可以调试组件、状态、事件、道具、路由等。

随着 Vue App 的体积膨胀和复杂性熵增，bug 可能会变得复杂且难以诊断。console.log 可能有点头大。Vue Devtools 可以辅助您更高效地定位 bug 和调试代码。

这位大佬科普了不同浏览器的 Vue Devtools 扩展插件，Vue Devtools 和 Pinia 状态管理梦幻联动等常见使用场景。

玩弄 Pinia

这是一个由“Pinia 之父” E.S.M. 言传身教的在线深度教程。

请加入候补名单，这样在发布时可以提前获得访问权限。

扩展 Vue App 的常见障碍包括但不限于 SSR 的安全隐患、令人头大的组件间通信和全局状态共享的泥潭等。为此，Vue 官方强烈推荐诉诸 Pinia 进行状态管理。

虽然状态管理没有银弹，但 Pinia 可以与 Options API 和 Composition API 梦幻联动。当您好不容易鼓起勇气集成 Pinia 时，随之而来的另一个 bug 是：Pinia 的正确打开方式是什么？

本课程由“Pinia 之父”言传身教，涵盖了使用 Pinia 的最佳实践和最渣实践，在线教学和反向教学辅助您全方位无死角玩弄 Pinia。如果您想和 Vue 团队的核心成员深入沟流，欢迎付费自学。

Berryjam (Alpha)

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

这是一个免费的工具，可以分析 Vue 组件的使用情况。

Berryjam 可以分析和优化您的 Vue 或 Nuxt 组件，用来即时监控项目的组件使用情况和“效率杀手”，创建更高效的代码，解放生产力。

Nuxt 技能树

诉诸 NuxtImage 优化 Nuxt 性能

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

这是一个关于诉诸 Nuxt Image 优化 Nuxt 图像的教程。

在大多数情况下，性能尴尬是由于没有针对图像进行现代 Web 优化。NuxtImage 是 Nuxt App 一个即插即用的图像优化工具人。您可以使用内置优化器或图像 CDN 调整图像大小和转换图像。

这位大佬科普了一系列 Nuxt 性能优化的博客，本文是该系列的第 10 篇博客。

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

挨踢圣经

如果我们期望统计代码函数，那么我们不应该将其理解为“生产的行数”，而应该将其理解为“花费的行数”。

—— 迪科斯特拉（“结构化编程之父”）

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

Vue 小技巧：诉诸组合式 API 赋能简单状态管理

您可能认为您需要一个状态管理库比如 Pinia 来管理您的状态，但从来如此，便对么？

如果您有一个只需在若干组件间共享状态的迷你 App，那么您可以诉诸组合式 API 创建一个简单的状态管理技术方案。

构建简单的状态管理解决方案

让我向您表演如何诉诸组合式 API 构建一个简单的状态管理解决方案，其中包含状态、mutation/action 和 getter。

我们首先使用 useState.ts 组合式函数中的 reactive 对象来定义状态：

// useState.ts
const state = reactive({ counter: 0 })

export const useState = () => {
  return {}
}

通过将状态提升到组合式函数之外，就可以在多组件间共享该状态。

接下来，我们需要定义可以更新状态的 mutation/action。我们需要做的就是添加一个更新状态的函数：

// useState.ts
const state = reactive({ counter: 0 })

export const useState = () => {
  function setCounter(value: number) {
    state.counter = value
  }

  return { setCounter }
}

对于 getter，我们可以简单地返回状态：

// useState.ts
const state = reactive({ counter: 0 })

export const useState = () => {
  const count = computed(() => state.counter)
  const doubleCount = computed(() => state.counter * 2)

  return { count, doubleCount }
}

请确保您的组合式函数只返回只读状态。默认情况下，计算属性是只读的，但您也可以使用 Vue 提供的 readonly 函数。

为何需要 Pinia？

您可能想知道，如果可以使用组合式 API 来构建简单的状态管理解决方案，为什么还要使用存储库比如 Pinia？Pinia 提供了解答，以下是若干原因：

支持 Devtools（开发者工具）
HMR（热模块替换）
插件：诉诸插件扩展 Pinia 功能
为 JS 用户提供妥当的 TS 支持或自动补全
支持 SSR（服务端渲染）

程序员梗图

爱因斯坦是全栈攻城狮 = “相对论之父” + 量子力学奠基人。

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

周边资讯

测试还是不测试，从技术维度看问题

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

本文回答了一个古老的问题，即什么东东需要测试，以及什么东东不需要测试。

测试的边界很敏感，我们应该测试函数呢，还是测试模块呢，还是测试组件呢，还是测试一键三连的端到端功能呢？

私以为测试最大的 bug 在于“千里之行，死于足下”。因为很多前端爱好者（包括我）在学习初期都会选择性无视测试的重要性，但是如果大家读过源码、参与开源贡献或管理项目，就会明白测试是前端进阶的必由之路。

我还记得第一次看 Vue 源码的心理阴影面积，我看不懂，但我喵瞪狗呆，一大坨密密麻麻的东东映入眼帘，直接触发“密集恐惧症”。

TS 泛型和高级函数类型

这篇文章将引导您了解若干高级 TS（TypeScript）功能，比如泛型和高级函数类型。

这位大佬科普了泛型和高级函数类型的奇技淫巧，利用这些强大的工具来设计高级的类型安全代码。

为前端项目创建 CI/CD 管道

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

自动测试和部署 App 势在必行，避免浪费时间或犯错误。

本文将向您表演如何实现这一目标。

CI/CD 大意是持续集成和持续交付（或持续部署）。简而言之，这是一种自动开发、测试和部署前端 App 的方法。它可以辅助您处理所有单调的琐事，让您可以更专注于禅模式开发和修复错误。

我们如何将 JS 打包体积优化 33%

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

通过用 Rollup 替换过时的模块打包器，Dropbox 将其 JS 打包优化了 33%。

现有系统导致打包体积过大，并出现性能问题。

前端生态人气爆棚的模块打包器分别是 2012 年的 webpack 和 2015 年的 Rollup，大家可能质疑我为何没有吹一下 Vite，因为 Vite 截至今年的生产环境打包构建也是诉诸 Rollup 的超能力。

大家可能又问我为什么是截至今年，因为尤大 Vite 最新演讲您还没看。

尤雨溪先生如是说，Vite 未来将诉诸 Rust “锈化”重构，使用 Rolldown 打包构建，而不是 Rollup。

详情请临幸尤大 Vite 最新演讲。

Git 奇技淫巧

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

本文包含了若干奇技淫巧和配置，让我们的日常生活更轻松。

这位大佬科普了 Git 的若干奇技淫巧，比如 Git 别名等，

Git 是开发者拥抱国际开发社区和公司版本管理必知必会的基本技能，不管你是前端爱好者还是后端工程师。

这里额外补充一个粉丝福利，这是我之前学习 Git 的资源之一，最骚的是，这个教程还有简体中文版本，我只能帮你到这里了。

详情请临幸《Git 高玩攻略》。

JS Promise 的正确打开方式

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）

JS 是一种“臭名昭著”的异步编程语言。

在本教程中，您将学习关于在 JS 中使用 Promise 和 async/await 的所有知识。

本文整体教学思路和阮一峰大佬的《ES6 标准入门教程》大同小异，如果您无法访问此网站，可以看《ES6 入门》的中文教程。

另外，不管是此博客和还是 ES6 入门，都不是异步编程的终点，很多教程会 CPU 我们，“回调地狱”指的是回调函数的嵌套和缩进。

除此之外，我们可以头脑风暴一下“回调地狱”的其他痛点，不然这种应试思维在面试时很容易和别人背得一模一样。

其实你是操作系统

Vue 技术周报：Vue vs Nuxt？Pinia 之父付费课程！Nuxt 图像优化（37期）