Vue scoped

近年来，大多数互联网公司，后端B/S工程大多数都使用Vue构建响应式web应用，例如开发平台、管理后台、分析平台等。在看某些Vue页面template代码时，是否会对<style scoped>产生疑惑？

scoped是什么

指的是给css style加个作用范围。

翻阅官方链接：这里，文档指出是预处理器对css样式和template的标签做了转化，添加唯一id属性。相当于dom加了个标记，css选择器也带了这个标记。这样对指定dom设置了样式。

使用场景

在项目中，常见是所有页面共用一个vue实例。

前端code经过npm或yarm打包之后，如果一个页面的style没有指定scoped，则这个页面下添加的style作用域是全局所有页面。

？！！某一天新增了1个页面的代码，加了组件样式，没使用scoped，上线后发现整个后台其他页面都受到影响~

实现原理

• vue预处理时，在template的dom元素中，添加唯一性id的属性，如下图：

• 相应的css也添加同一个id属性，如下图：

但值得注意的是，vue预处理器仅会对template中的标签添加id属性，不会对生成的dom元素添加

例如，使用js初始化生成html的组件，如echart、codemirror等，组件生成的div是不经过预处理的，不会带这个id。

以codemirror经过预处理的状态变化为例：

解决方法：

这类场景需弃用scoped，使用css选择器。

例如添加仅在本页面生效的全局唯一id或class，作为css选择器的parent。