Vue中的scoped属性深入解析：何时使用，何时可以避免？

之前实习的时候，code review 要求：在没有 scoped 时，要把样式写在整个页面的 class 中，以避免影响到全局样式。例如，如果多个页面都使用了 .example 这个类名，我们应该避免直接使用 .example 来定义样式。相反，我们应该使用更具体的选择器，如 .specific-page .example，这样可以确保我们的样式不会影响到其他页面中使用 .example 类名的元素。

但是最近看公司代码，发现一个文件，使用的样式在另一个文件中也用，但既没有 scoped ，又没用 class 包裹，我就疑问不会影响到另一个文件吗？导师告诉我因为这个不是 spa，但为了保险，用 class 包一下更好。于是就学习了一下 scoped 的使用原理。

在 Vue 的开发过程中，scoped属性在样式的局部化方面扮演了重要角色。它帮助开发者避免了样式的全局污染和意外覆盖。但是，scoped并非在所有情况下都是必需的。本文旨在探讨scoped属性的使用场景，分析何时可以安全省略，以及在单页应用（SPA）和多页应用（MPA）中如何做出合适的选择。

`scoped`属性的核心作用

scoped属性用于限制样式只作用于当前组件。通过在<style>标签中加入scoped属性，Vue 会自动添加一个独特的属性，如data-v-xxxx，以确保样式只作用于具有相同属性的元素。

vue 复制代码

<style scoped>
.example {
  color: red;
}
</style>

非 `scoped` 样式的处理方式

对于一些需要全局应用或在多个组件中共享的样式，可以不使用 scoped 属性。这类样式应该定义得尽量明确，以减少潜在的冲突。

vue 复制代码

<style>
.global-style {
  /* global styles go here */
}
</style>

在 SPA 和 MPA 中使用 scoped

如何区分 SPA 和 MPA？

Vue 通常用于构建单页应用（SPA）。在一个 SPA 中，所有的用户界面都在一个单一的页面中动态更新。用户在应用中的所有交互，如页面跳转、数据加载等，都不会导致整个页面的重新加载。URL 会通过 hash（#）或 History API 进行变化，以表示应用的不同状态或页面。

例如，一个 Vue SPA 的 URL 可能是这样的：

然而，Vue 也可以用于多页应用（MPA）。在一个 MPA 中，每一个页面都是一个单独的 HTML 文件，页面之间的跳转会导致浏览器重新加载整个页面。在 Vue 中，可以在每个页面使用 Vue 实例或组件，但是这些 Vue 实例或组件彼此是独立的。

MPA 的 URL 通常看起来像普通的网站链接，例如：

如果你的 Vue 应用的 URL 没有 hash（#）并且页面之间的跳转导致了浏览器的全页刷新，那么你可能是在使用 Vue 构建 MPA。如果你的 URL 包含 hash，或者使用了 History API，并且页面之间的跳转没有导致浏览器的全页刷新，那么你可能是在使用 Vue 构建 SPA。

SPA 中的 scoped

在 SPA 中，由于所有组件都加载在一个单一页面中，使用 scoped 属性可以有效防止样式的全局污染和意外覆盖。由于 SPA 的页面结构是动态变化的，组件的样式可能会相互影响，这时 scoped 属性的作用就显得尤为重要。

MPA 中的 scoped

在 MPA 中，每个 Vue 组件通常对应一个单独的页面。由于样式不会跨页面应用，即便不使用 scoped 属性，样式的全局污染和意外覆盖的可能性也相对较小。但在一个页面中如果有多个 Vue 组件存在，使用 scoped 属性仍然是一个明智的选择，以确保各个组件样式的独立性。

结论

理解 scoped 属性的作用和在不同应用类型（SPA 和 MPA）中的使用场景，能帮助开发者更加灵活和准确地控制 Vue 中的样式。合理选择是否使用 scoped 属性，是编写高质量 Vue 代码的关键。