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

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

免责声明

本文属于是语冰的直男翻译了属于是，仅供粉丝参考，视频解说请临幸 人猫神话@bilibili (space.bilibili.com/34931378759...%25EF%25BC%258C%25E8%258B%25B1%25E6%2596%2587%25E5%258E%259F%25E5%2591%25B3%25E7%2589%2588%25E8%25AF%25B7%25E4%25B8%25B4%25E5%25B9%25B8 "https://space.bilibili.com/3493137875994964/channel/collectiondetail?sid=1795271)%EF%BC%8C%E8%8B%B1%E6%96%87%E5%8E%9F%E5%91%B3%E7%89%88%E8%AF%B7%E4%B8%B4%E5%B9%B8") Weekly Vue News (weekly-vue.news/issues/109)...%25E3%2580%2582 "https://weekly-vue.news/issues/109)%E3%80%82")

Vue 技能树

Vue 和 Nuxt 的零和博弈：开发困境 (levelup.gitconnected.com/choosing-be...)

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 开发者工具的调试技巧 (vueschool.io/articles/vu...)

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

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

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

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

玩弄 Pinia (masteringpinia.com)

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

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

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

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

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

Berryjam (Alpha) (www.berryjam.dev)

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

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

Nuxt 技能树

诉诸 NuxtImage 优化 Nuxt 性能 (dev.to/jacobandrew...)

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

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

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

挨踢圣经

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

------ 迪科斯特拉（"结构化编程之父"）

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

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

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

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

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

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

ts 复制代码

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

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

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

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

ts 复制代码

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

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

  return { setCounter }
}

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

ts 复制代码

// 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（服务端渲染）

程序员梗图

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

周边资讯

测试还是不测试，从技术维度看问题 (web.dev/articles/ta...)

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

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

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

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

TS 泛型和高级函数类型 (engineering.leanix.net/blog/typesc...)

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

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

为前端项目创建 CI/CD 管道 (blog.openreplay.com/create-a-ci...)

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

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

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

我们如何将 JS 打包体积优化 33% (dropbox.tech/frontend/ho...)

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

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

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

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

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

尤大 Vite 最新演讲汉化版请临幸 B 站 (www.bilibili.com/video/BV1u8...%25E3%2580%2582 "https://www.bilibili.com/video/BV1u8411r7pr)%E3%80%82")

Git 奇技淫巧 (justinjoyce.dev/git-tips-an...)

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

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

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

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

《Git 高玩攻略》请临幸 (git-scm.com/book/zh/v2)...%25E3%2580%2582 "https://git-scm.com/book/zh/v2)%E3%80%82")

JS Promise 的正确打开方式 (www.freecodecamp.org/news/javasc...)

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

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

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

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

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

其实你是操作系统 (github.com/plbrault/yo...)

这是一款游戏，让您 cos（扮演）计算机的 OS（操作系统）。

因此，您必须管理进程、内存和 I/O 事件。

亲身体验请临幸：plbrault.github.io/youre-the-o...

这个网站以游戏的方式来辅助您学习 OS 的概念，您需要 cos OS 然后自己管理进程和内存等，由于语冰自己目前还没整明白，欢迎大家沉浸式体验测评一下自己的 OS 基础。

GodMode (github.com/smol-ai/God...)

GodMode 是一款 AI 聊天浏览器。

它允许您同时与 ChatGPT、Claude、Bard、Bing 和 Llama2 聊天。

TypeStat (github.com/JoshuaKGold...)

TypeStat 将 JS 转换为 TS，并修改现存代码中的 TS 类型。

它可以在不更改运行时行为的情况下添加和移除类型。

它还可以推断类型并注释缺失的 null 和 undefined。

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