作用：解决全局样式 相互覆盖 ，都是自带九年用
scope
在使用Vue-Cli 开发时，在组件的<style></style>加上 scoped属性，可以让<style></style>里的样式只在当前组件生效。
原理：
组件scoped里的样式都加了当前组件的唯一标识data属性。也就是说，即使当前组件的class跟其他组件重名，因为每个组件的data属性不一样，当前组件的样式也就不能再其他组件生效了。
缺点：局限于vue文件
Css modules
原理：它不是添加属性，而是直接改变类名,比scroped更优。
vue cli已经集成了，我们都可以直接使用。
module的用法也很简单，只要在style中增加module属性即可。不同之处是它在布局中的引用，都需要添加前缀$style。- 结构更加清晰，同样避免全局污染。
- 在tsx文件中该如何使用呢，现在也是集成直接使用
创建test.module.scss，以.module.scss结尾
在tsx文件中引用
import s from './test.module.scss'
export default defineComponent({
setup () {
return () => {
return <div class={s.test}>
</div>
}
}
})
对于快速查找定位，module更加合适，同时module对于style向下传递的控制权也非常灵活；额外的还有变量导出等便捷功能。
