携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天
一、scoped 属性
1.什么是 scoped
在 Vue 组件中，为了使样式私有化（模块化），不对全局造成污染，可以在 style 标签上添加 scoped 属性以表示它的只属于当下的模块，局部有效。如果一个项目中的所有 vue 组件style 标签全部加上了 scoped，相当于实现了样式的私有化。如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样式，而又不想去除 scoped 属性造成组件之间的样式污染。
此时只能通过穿透 scoped 的方式来解决，选择器。
2.scoped 的实现原理：
Vue 中的 scoped 属性的效果主要通过 PostCSS 转译实现，如下是转译前的 Vue 代码：
即：PostCSS 给所有 dom 添加了一个唯一不重复的动态属性，然后，给 CSS 选择器额外添加一个对应的属性选择器来选择该组件中 dom，这种做法使得样式私有化。
二、SPA 单页面
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML、JavaScript和 CSS。一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换 HTML 的内容，从而实现 UI 与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于 ajax，我们可以实现无跳转刷新，又多亏了浏览器的 histroy 机制，我们用 hash 的变化从而可以实现推动界面变化。从而模拟元素客户端的单页面切换效果：
SPA 被人追捧是有道理的，但是它也有不足之处。当然任何东西都有两面性，以下总结SPA 的优缺点：
1.优点：
1）无刷新界面，给用户体验原生的应用感觉
2）节省原生（android 和 ios）app 开发成本
3）提高发布效率，无需每次安装更新包。这个对于 ios 开发人员来说印象尤其深
4）容易借助其他知名平台更有利于营销和推广
5）符合 web2.0 的趋势
2.缺点：
1）效果和性能确实和原生的有较大差距
2）各个浏览器的版本兼容性不一样
3）业务随着代码量增加而增加，不利于首屏优化
4）某些平台对 hash 有偏见，有些甚至不支持 pushstate
5）不利于搜索引擎抓取
