• Vue 项目中 style 样式中为什么要添加 scoped

    结论先行：

    为了达到组件样式模块化。也就是让样式作用域仅限于当前组件中，不影响全局，避免了样式污染和样式冲突的问题。

    它的底层实现逻辑呢，

    就是生成一个唯一的 data 属性作为标识，例如 data-v-xxx 并添加到 DOM 节点上。然后再通过属性选择器的方式，拿到这个全局唯一标识来私有化样式。

     

    1、作用 

    Scoped 是指在 CSS 中通过特定的方式限定样式规则的作用范围，使得样式只作用于特定的组件或元素，而不会影响到其他组件或元素。在 Vue 和 React 等前端框架中，Scoped CSS通常是通过加入特定的选择器来实现的。 

    在 Vue 中使用 scoped 属性可以让样式作用域仅限于当前组件中，不影响全局，避免了样式污染和样式冲突的问题。

    在组件中使用 scoped 的方式如下：

    1. <template>
    2.     <div class="example">Example Componentdiv>
    3. template>
    4.  
    5. <style scoped>
    6. .example {
    7.     color: red;
    8. }
    9. style>

    在这个例子中，.example 样式规则只会作用于当前组件内部的元素，而不会影响全局的样式。

    2、原理：

    为了达到组件样式模块化，做了两个处理：

    ① scoped 会为每个组件的 DOM 节点添加一个唯一的 data 属性(例如: data-v-5558831a)作为标记；

    ② css样式上是通过 data 属性选择器（[data-v-2311c06a]）的方式来私有化样式。

    3、编译前后

    Vue中的 scoped 属性的效果主要是通过 PostCss 实现的。

    在 Vue 中，Scoped CSS 是通过给每个组件的 style 标签添加一个唯一的属性选择器来实现的，例如