Vue2 与 Vue3 中 scoped 的原理及作用

目录

Vue2 与 Vue3 中 scoped 的原理及作用

一、Vue2 中 scoped 的作用和原理

二、Vue3 中 scoped 的作用和原理

---

在 Vue 的开发中，scoped属性在组件的样式部分起着重要的作用。本文将详细介绍 Vue2 和 Vue3 中scoped的作用和原理，并附上相关代码示例。

一、Vue2 中 scoped 的作用和原理

1. 作用：
   • scoped的主要作用是让样式在本组件中生效，不影响其他组件。在 Vue2 中，每个组件都是独立的，可以进行布局、样式调整和逻辑处理。如果在style标签中不加入scoped，那么样式会影响到所有的组件。而加入scoped后，样式只会在本组件中起作用。
   • 例如，在页面中有一个默认的home和关于两个部分，当在style中为H1设置背景为红色且没有scoped时，切换到任何一个路由下，所有的H1都会变为红色。而加入scoped后，只有在home组件中的H1会生效，其他组件中的H1不受影响。
2. 原理：
   • 细心观察可以发现，当不加入scoped时，页面元素没有任何特殊的调整。而加入scoped后，本组件的元素节点会新增一个自定义属性，比如data-v-xxxx。
   • 这是因为scoped的原理是给元素的节点新增一个自定义属性，然后 CSS 根据属性选择器来添加样式。例如，有两个div，一个设置了带有自定义属性的样式，另一个没有设置。当使用属性选择器时，只有具有该自定义属性的div会应用相应的样式。

以下是 Vue2 中的代码示例：

<template>
  <div>
    <h1>这是首页</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

<style scoped>
h1 {
  background: red;
}
</style>

二、Vue3 中 scoped 的作用和原理

在 Vue3 中，scoped的作用与 Vue2 基本相同，都是为了让样式在本组件中生效，不影响其他组件。

原理方面，Vue3 也采用了类似的方式，给元素的节点新增一个自定义属性来实现样式的局部化。不过，Vue3 在编译和性能方面进行了一些优化。

以下是 Vue3 中的代码示例：

<template>
  <div>
    <h1>这是 Vue3 首页</h1>
  </div>
</template>

<script setup>
// Vue3 的组合式 API
const name = 'Home';
</script>

<style scoped>
h1 {
  background: blue;
}
</style>

在 Vue2 和 Vue3 的开发中，了解scoped的作用和原理对于正确地应用样式和提高代码的可维护性非常重要。在面试中，如果被问到scoped是干嘛的，一定要清楚地回答出它的作用和原理。