刨析 Scoped 原理

Scoped

样式冲突是我们经常会遇到的问题，但是我们该如何解决呢？

样式冲突

我们开发中经常会看到父子组件嵌套，但是由于我们最终渲染到同一个文档中所以样式非常容易发生冲突，在组件中我们可以更这样做解决样式的冲突问题这里埋下个伏笔为下文刨析 scoped 原理做下铺垫，读者可以看一下此处解决样式冲突所使用的方法。

<h1 data-v-01></h1>

h1[data-v-01] {    color:red;}

当然不可能将所有的节点都添加属性

了解 Scoped

在 vue 组件中 scoped 属性使 CSS 只对当前组件生效，而不对其他的组件，比如说不会对子组件生效，下面我们直接用例子来让大家了解 scoped 的应用，首先是父组件

<template>    <div class="main">        <p>HELLO,scoped</p>        <hello></hello>    </div></template>

父组件的样式

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

子组件

<template>    <div>        <p>Hello,scoped</p>    </div></template>

在之后我们会发现父组件内的段落文字为红色，css 作用上了，而子组件的段落文字为黑色说明 css 没有作用上，scoped 属性成功地被应用但是我们还想让该子组件的样式也能被修改，那我们就可以使用 deep 来使 CSS 穿透过去为其渲染，而在 Vue2 和 Vue3 的 deep 选择器的写法截然不同.

在 Vue2 中如果我们不使用预处理器的话是需要使用>>>来进行样式穿透

>>> .child-class {    color:red}

在 Vue3 中我们使用:deep 来完成样式穿透

:deep(.child-class) {    color:red;}

刨析原理

scope 是使用 Postcss 工具来实现的，其会对 vue 组件进行一次代码转换，拿上面的例子进行转换如下，我们会发现我们的标签多了一个属性，以及选择也新增了同样的属性，我们在父组件中的子组件上没有相对于的属性，所以样式并没有被渲染加载，这个方法对于了我们开始时所介绍的解决样式冲突的方法，而 scoped 则是根据这个方法来实现的，这就是 scoped 的实现原理。

<template>    <div class="main">        <p data-v-f3f3eg9>HELLO,scoped</p>        <hello></hello>    </div></template><style scoped>    .main p[data-v-f3f3eg9] {        color:red;    }</style>

使用 scoped 的好处

当我们使用 scoped 的时候，父组件的样式不会泄露到子组件中，但是一个子组件的根节点还是会被父组件的 scoped 的 css 和子组件的 scopedcss 影响，但是我们可以根据布局等原因来去改变子组件的根节点样式。