Vue Tips

Appearance

Return to top
On this page

🔥 (#75) Nested CSS

2022 年 8 月

Hey 各位！

我最近专注写文章。

希望这可以转化成更多文章和其他产出，但我不会承诺结果如何。

Have a great week.

— Michael

🔥 没有 await 的异步模式 Async Without Await

在组合式 API 中使用异步逻辑有时候很棘手。

我们需要正确书写顺序，否则 await 关键词会让我们的响应式混乱。

如果我们使用没有 await 的异步模式，就不会有这样的困扰：

const title = ref("Basic Title");
// 我们可以把这个异步函数放在任何需要的地方
const { state } = useAsyncState(fetchData());
const betterTitle = computed(() => `${title.value}!`);

这是运行的细节：

  1. 我们 同步方式 定义 ref
  2. 更新会 异步 在后台运行
  3. 由于响应式的存在，一些都是正常运行

以下是来自 VueUse 的 useAsyncState 可组合的实现方式的基本思路：

export default useAsyncState(promise) {
	// 1. 创建同步 ref 状态
  const state = ref(null);

  const execute = async () => {
		// 3. 响应式会在 resolve 之后更新
    state.value = await promise;
  }

	// 2. 在后台异步执行 promise
  execute();
	return state;
}

🔥 嵌套 CSS

CSS 嵌套是一个新特性，在大多数浏览器中还不可以使用，但我们可以使用 PostCSS 预处理器来达到相同效果：

/* Get rid of link highlighting in article headings */
.content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    a {
      @apply text-type-dark;
    }
  }
}

我想覆盖我博客中所有标题的样式，嵌套语法非常方便！

如果没有嵌套，我不得不为每个标题单独设定属性，这会很麻烦。尤其是当我只想把一部分内容选中：

.content h1 a {
  @apply text-type-dark;
}

.content h2 a {
  @apply text-type-dark;
}

.content h3 a {
  @apply text-type-dark;
}

// ...you get the idea

当然，在浏览器原生支持之前，需要编译嵌套的 CSS，就像数学中把 2(a + b) 编程 2a + 2b 一样。

关键地是，我们不需要手写，可以技术手段解决。

可以使用 PostCSS 里的 postcss-nesting 插件来完成这项工作。

如果你和我一样在使用 Nuxt3 和 TailwindCSS，可以使用 Nuxt Tailwind 模块，该模块默认开启此功能！

📜 Volar 中关于 TypeScript Intellisense 的报错

最近迁移博客到 Nuxt3 的时候遇到一个 ts 报错：

TypeScript intellisense is disabled on template...
TypeScript 智能提示在模板中禁用了......

这是解决方案

📜 使用 Vue 构建一个在线课程应用

在这篇文章中，Anthony 向我们展示了如何使用 Vue 和 Vite 构建自己的在线课程应用。

阅读 Build an Online Course App with Vue

💬 更少的文档内容

“当用户吐槽‘看不懂，文档在哪里？’的时候，我们应当思考重写这部分功能，使其清晰可用，而不是编写更多文档做解释。” — Jeff Atwood

🧠 间隔重复：Ref vs. Reactive

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

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

在使用 composition API 的时候，用 ref 好还是 reactive 更好？

这里列举一些 ref 比 reactive 有优势的地方。

使用 ref 包裹 js 对象，同时对比 reactive 和普通对象的使用场景，区别显而易见：

// I can expect this ref to update reactively
if (burger.value.lettuce) {
  // ...
}

// I have no clue if this value is reactive
if (burger.lettuce) {
  // ...
}

使用 watch 方法时，ref 会自动解构，非常易用：

// Ref
const refBurger = ref({ lettuce: true });
watch(
  // Not much, but it's a bit simpler to work with
  refBurger,
  () => console.log("The burger has changed"),
  { deep: true }
);

// Reactive
const reactiveBurger = reactive({ lettuce: true });
watch(
  () => burger,
  () => console.log("The burger has changed"),
  { deep: true }
);

使用 ref 还有一个优点，你可以在 ref 中放入 reactive 对象。这样可以任意组合 reactive 对象，底层还是使用 ref：

const lettuce = ref(true);
const burger = reactive({
  // 把 ref 变成属性
  lettuce,
});

// 直接监听 reactive 对象
watchEffect(() => console.log(burger.lettuce));

// 也可以直接监听 ref
watch(lettuce, () => console.log("lettuce has changed"));

setTimeout(() => {
  // 更新 ref 的值，会自动触发所有的 watchers
  lettuce.value = false;
}, 500);

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

来源

原文 https://michaelnthiessen.com/weekly-075-august-24/

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