Vue中scoped样式与deep选择器的工作原理是怎样的？

本文共计1243个文字，预计阅读时间需要5分钟。

目录 + Scoped 的作用 + Deep 的作用 + 总结 + JS 引入模块化概念后，变得更容易于开发和维护，但CSS样式由于其特殊性，一直没有实现模块化。Scoped 的出现是为了实现样式模块化，其基本用途是选择器属性选择器。

目录

• scoped的作用
• deep作用
• 总结

JS引入模块化概念后，变得更易于开发维护，但是css样式由于其特殊性，一直没有实现模块化，scoped的出现就是为了实现样式模块化，其本质利用属性选择器实现的一种伪模块化，并非真正意义上的模块化，但这已经让css模块化前进了一大步，要知道JS的模块化也是以这种方式开始的，比如早期的seajs，requirejs都是利用闭包封装达到模块化的效果，后来慢慢的出现了ES6的模块化规范import/export，说不定未来的某一天css也会出现真正的模块化，我们就不用学习这种知识点了。

说回正题，该篇文章主要从以下几个问题，进行探索scoped和deep相关的实现原理：

• 1.scoped生成的dom和style有什么特点；
• 2.父组件引入子组件，生成的dom和style有什么区别；
• 3.父组件传入的子组件slot，生成的dom和style是什么样的；
• 4.父组件如何修改子组件的样式；

scoped的作用

scoped主要用于vue中style部分，加上scoped后，最终生成的dom和style都会被加上一个唯一的动态属性，这样样式只会对当前组件有效，不会污染全局样式。