理解Vue中scoped与深度选择器deep的原理

1. scoped的作用

scoped style最初是一个html5的特性， scoped主要作用于vue中style部分。加上scoped后，最终生成的dom和style都会被加上一个唯一
的动态属性，所以其样式只会对当前组件有效，不会污染全局样式。如下图所示：

<style lang="scss">
	.login {
	  background: url('~@/assets/images/bg.png') no-repeat;
	  background-size: cover;
	  min-height: 100vh;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  .login-form {
	    max-width: 380px;
	  }
	}	
</style>

如果没有加scoped，浏览器渲染结果如下：


加上了scoped,可以看到渲染效果如下：


其实可以发现组件渲染时会有一个data-v-hash属性，说明加了scoped有以下作用：
（1）dom会被添加上一个唯一的属性值，生成的style样式也会使用该属性作为属性选择器设置样式， 这样使得样式只对该组件有效，避免了全局样式污染；
（2）每个组件内的dom标签都会被设置上同一个data属性值；

2. deep的作用

考虑在使用scoped的父组件中如何修改子组件样式？
想要修改子组件的内层元素样式，就需要使用/deep/了，/deep/是less中深度选择器的>的另一种写法，只是因为>在vue模板中不能正常解析，所以用/deep/代替。

<style lang="less" scoped>
.parent {
	color: bule;
	h1 {
		font-size: 30px;
	}
/deep/	.child {
	    font-size: 20px;
	    .author {
	        color: orange;
	    }
	}
}
</style>