Vue 组件的＜style＞标签上 添加的scoped属性

一、scoped的作用

1.限制样式的作用域，只在当前的页面组件有效。

2.避免样式污染，影响到其他组件。

3.开发过程中，样式冲突可能会是一个大问题，合理使用全局css。

二、用法举例

<script setup name="" lang="ts">
</script>
<style lang="scss" scoped>
.search-fix {
  display: flex;
  justify-content: space-around;
}
</style>

三、样式隔离机制

实现原理是什么？是怎么做到隔离的？

当在 Vue 组件的<style>标签上添加scoped属性后，Vue.js 在编译组件时，会为每个组件的元素添加一个唯一的数据属性（例如data-v-[hash]，其中hash是一个生成的唯一哈希值）。对于带有scoped属性的<style>标签中的 CSS 选择器，会自动添加这个数据属性选择器来限制样式的作用域。

举例：编译后的 控制台元素截图

编译打包后的 .css文件

根据这个唯一hash值，我们能够知道页面的层级结构，哪些是属于一个组件的，哪些是多个组件嵌套的。

新创建了前端公众号，【码农生存指南】
欢迎同行互关交流！关注后私信我返关~