Vue Tips

Appearance

Return to top
On this page

🔥 (#69) 改进我的电子书工作流

2022 年 7 月

作者说

嘿，各位！

上周我花了一些时间来改进我的电子书工作流。

我未来可能会继续发布电子书，如果电子书制作越容易持续发布的机会就越大。优化工具的过程会很有趣！

受到 Nuxt 的启发，我决定使用基于文件夹的方式进行管理，但会略有不同：

content/
layouts/
styles/
table-of-contents.json

所有的 Markdown 文件放入 content/ 中，通过 front matter 字段用来设定布局方式：

---
layout: chapter
title: Forgotten Features
subtitle: "All those things you forgot Vue could do, or didn't know about in the first place."
---

布局文件使用 mustache 包提供的有 mustache 语法来组织 HTML：

<div class="chapter">
  <h3>Chapter</h3>
  <h1>{{ &title }}</h1>
  <p>{{ &subtitle }}</p>
</div>

<div class="tips">{{ &content }}</div>

因为所有的字段都可以通过 Markdown 解析器来获取，这意味着可以在字段中使用 Markdown 语法。这我需要通过 &<var> 语法来转义所有的 HTML 标签。

所有的样式还是在一个文件中，未来我计划每种布局都使用独立的样式。

最后，table-of-contents 是一个 JSON 数组用来指定内容的顺序：

[
  "cover",
  "table-of-contents",
  "intro",
  "ch-css",
  //...
  "ch-forgotten",
  "back-cover"
]

这样足够了！

接下来是 tips 内容。

—Michael

🔥 可复用性的六种等级

这里有 6 种不同的可复用性等级，你可以在组件中使用。

每种等级会增加更多的复杂性，但也会提升代码的复用能力。

这也是我的课程《Resable Components》中的重点。

这里有六种可复用性的等级：

  1. 模板 Templating —通过在组件中包装的方式来复用代码
  2. 配置 Configuration —使用配置 Prop 实现不同的行为
  3. 适用 Adaptability—允许组件向后兼容
  4. 反转 Inversion —让其他组件控制过程
  5. 扩展 Extension —组件始终考虑可复用性
  6. 嵌套 Nesting —创建强大的组件层级结构

在课程的摘录 里有更多的细节。

🔥 检查 Vue 版本信息

在运行时查看 Vue 的版本很容易：

import { version } from "vue";

if (version.split(".")[0] === "2") {
  console.log("Uh, this app is gonna crash.");
  console.log("Upgrade to Vue 3!");
}

📜 如何卸载全局的事件监听器

Markus 写了一篇很棒的文章，介绍了在组件中如何处理事件相关的问题。我花了一段时间才养成了他提到的正确处理事件习惯。

我最近碰到的一个组件里有七八种事件处理方法，所以我使用数组模式：

export default {
  created() {
    // Add directly so it doesn't become reactive
    this.eventListeners = [
      ["mouseout", this.handleMouseOut],
      ["click", this.handleClick],
      // ...
    ];

    for (const [event, handler] of this.eventListeners) {
      window.addEventListener(event, handler);
    }
  },

  beforeDestroy() {
    for (const [event, handler] of this.eventListeners) {
      window.removeEventListener(event, handler);
    }
  },
};

通过数组来处理很简单，所以我认为这是一种很好的清理方式。

继续阅读：如何清理全局事件监听器

💬 两种类型的语言

“世界上只有两种（编程）语言：一种是让人们抱怨的语言，另一种是没有人使用的” —Bjarne Stroustrup

🧠 间隔回顾：Vue Router 的深度链接

想要长时间牢牢记住某些事情，最好方式就是定期回顾，逐渐增加回顾的间隔 👨‍🔬

实际上，记住这些 tips 比发呆有用得多，这是几周前的一个 tip 可以唤起你的记忆。

你可以在 URL 中存储一部分状态，方便恢复页面的某些状态。

比如，你可以在加载页面的时候指定一个被选择的日期范围：

someurl.com/edit?date-range=last-week

这是很好的方案：对于一个服务端渲染应用来说，用户分享链接会很方便。在两个不同的应用中跳转的场景，和常规的链接相比，这种方式会携带更多信息。

你可以存储过滤参数、搜索值、是否弹窗、尤其是无限滚动加载中之前滚动到的位置等等。

vue-router 可以通过这种方式获取参数，其他的 Vue 框架比如 Nuxt 和 Vuepress 也一样：

const dateRange = this.$route.query.dateRange;

如果要更新参数，可改变 RouterLink 组件的参数：

<RouterLink
  :to="{
  query: {
    dateRange: newDateRange
  }
}"
></RouterLink>

这是一个示例：

https://codesandbox.io/s/deep-linking-with-vue-router-vhxkq?file=/src/components/DeepLinking.vue

p.s. 我还有两门课程 Reusable Components 和 Clean Components

来源

原文 https://michaelnthiessen.com/weekly-069-july-13/

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。