众所周知scoped可以设置样式的作用域，让组件内的样式不影响到组件外，但是vue官网里是不推荐是使用scoped，那除了scoped之外还有那几种设置样式作用域的方式呢？
1.class的策略。
即：
使用唯一的 class 名可以帮你确保那些三方库的 CSS 不会运用在你自己的 HTML 上。比如许多工程都使用了 button、btn 或 icon class 名，所以即便你不使用类似 BEM 的策略，添加一个 app 专属或组件专属的前缀 (比如 ButtonClose-icon) 也可以提供很多保护。
vue官方，是极力推荐这种模式的写法。
例如:
我的页面是写首页的，即home页，在class起名的时候，前缀或后缀带上首页的标记。
<style >
.home_page{
}
.home_body{
}
</style>
2. css model
构建步骤中对CSS类名选择器限定作用域的一种方式。
用法：
<style model >
.home_page{
}
.home_body{
}
</style>
实际上，我个人觉得model的方式比scoped的方式更好。
scoped作用域限制是因为它他的属性上加上了一个唯一的值，在加了scoped之后，我们F12检查的时候，经常能看到：
<span data-v-0467f817 class="errShow">css scoped</span>
而使用css model的时候 ，F12检查：
<span class="_3ylglHI_7ASkYw5BlOlYIv_0">css model</span>
css scoped的增加属性还不能完全避免样式与外部的互相影响，而css model的实现css作用域的方式却更加彻底，它不是添加属性，而是直接改变类名
而，css modules的作用远不止样式作用域，通过以上链接去了解它的强大之处吧。
2. css sass
实际上，使用sass做样式作用域，也是属性一种class的策略。
<div class="page-home">
<div class="title"></div>
<div class="body"></div>
</div>
在样式命名上，我们通过以上方式，全部demo定义在page-home下。
在css 上
<style lang="scss">
.page-home{
.title{
}
.body{
}
}
</style>
我们只要保证，在整个项目里，page-home是唯一的。
end.............
