🔥 (#72) The CSS Unselector #

August 2022

天哪，虽然已经持续发布了 71 周的周刊，我今天差点忘了！

新周刊发了，虽迟但到！

这是本周的 tips 内容！

— Michael

🔥 The CSS Unselector #

提起 CSS 我们通常讨论的是如何通过选择器来选择具体元素。

要确保选对了元素，这很难。

我的博客使用了 Vue Router 提供的 .router-link-active 来让链接当前的页面。我会改变当前链接的颜色，让用户知道浏览位置。

我想确保页面里的链接不会使用同样的方式突出展示。

例如，一篇文章开头的目录应该有正常外观的链接，而不是改变颜色。

为了做到这一点，我需要避免选择所有在 href 属性中带有 # 的链接。

.router-link-active: not([href * = "#" ]);

我正在使用一个 :not 查询，但在其中使用一个属性选择器。

我的实际代码甚至更有趣，因为还有一些其他的事情需要我考虑。

.nav-link.router-link-exact-active:not(.site-title):not([href*='#'])

🔥 动态返回值 #

组合代码可以返回单个值或者对象。通常，使用 ref 包裹。

但我们可以根据需要动态切换：

// 返回单个值
const now = useNow();

// 更精细控制
const { now, pause, resume } = useNow({ controls: true });

这很棒，因为大多数情况我们只需要一个值。什么情况下会变得复杂呢？

通过动态提供 ref 对象值，可以让我们更高级地使用他们，即便他们很少被使用。

内部可能这样实现：

export default useNow(opts) {
  const {
    controls = false,
	} = opts;

	// Do some things in your composable

  if (controls) {
    return { now, pause, resume };
  } else {
    return now;
  }
}

📜 失效的计算属性 Computed #

你有没有遇到要强制更新计算属性的情况？有没有想过为啥会遇到这种情况？

在这篇文章里，Abdelrahman 展示了一种非常聪明的方法，来解决这个问题。

进一步阅读：Invalidating Computed with the Composition API

💬 理论和实践 #

“理论是你知道一些东西，但不会使用。实践是你知道某些东西起作用，但不知道为什么。程序员们会统一理论和实践：程序跑不起来，也不知道为什么” —Unknown

🧠 间隔重复：为什么必须有一个真相的来源 #

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

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

这是我理解的状态管理关键原则：

Each piece of state has a single owner, a single source of truth.

每个部分的状态是独立的、单一的信息来源

不允许在其他地方修改状态，智能是临时调取引用。

如果 Vuex 存储了一个数组，那只能在 Vuex 里存储和更新。应用中如果要使用这个值，必须从 store 里读取，直接读取或者通过其他组件读取。

如果这个状态是某个组件独有，只有这个组件可以修改它。这意味着其他组件比如通过 emit 事件来进行操作更新。

为什么？

如果你允许在任意位置修改，代码会一团糟。

通过单一的状态来源，你可以轻松理解发生了什么。

最好的代码是易读易懂的。

p.s. I also have two courses: Reusable Components and Clean Components

来源 #

原文 https://michaelnthiessen.com/weekly-072-august-03/

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