先来说说实现方式
vue中的样式作用域是通过属性选择器来实现的，例如同样一个类名，我们是通过 .类名[属性名] 来做区分的，我们这里主要是要搞清楚这里的属性名是怎么分配的。
样式作用域规则
接下来我们分情况来说一下样式作用域：
- 对于有样式作用域的组件，该组件的所有后代元素都会具备一个相同的作用域属性，而该组件的内部的根元素除了具备当前组件作用域属性也会具备其父级组件的作用域，当然如果父级没有作用域则不具备
- 对于没有样式作用域的组件，如果父组件是有作用域的，那么该组件只有根元素会继承父组价的作用域，其后代的元素不会有作用域
- 对于处在同一层次的组件，其作用域是相同的，从下一代开始才会有所区别
- 特别要注意的是对于组件的复用，在当前项目，不管是什么层级，复用的组件作用域都相同
样式作用域图示
实际应用效果
有了基本的样式作用域知识储备之后，接下来我们来看一下 vue 最终会怎么将这些样式作用域应用到选择器的。
对于单个的选择器 .box[>.box a[>.box[>.box > div[>根据上面的知识储备，我们就知道，如果组件都只被引用一次，通常是不存在样式干扰的，但是如果一个组件在一个页面中复用多次，依然是有样式干扰的可能。
来自：https://blog.csdn.net/GD6570/article/details/108547949
ES6之块级作用域
在ES5中，只全局作用域和函数作用域。这会导致函数作用域覆盖了全局作用域；亦或者循环中的变量泄露为全局变量。用let命令新增了块级作用域，外层作用域无法获取到内层作用域，非常安全明了。
es6块级作用域
在JavaScript中使用var定义一个变量，无论是定义在全局作用域函数函数的局部作用域中，都会被提升到其作用域的顶部，这也是JavaScript定义变量的一个令人困惑的地方。由于es5没有像其它类C语言一样的块级作用域,因此es6增加了let定义变量，用来创建块级作用域。
Js作用域和执行上下文
作用域是在函数声明的时候就确定的一套变量访问规则，而执行上下文是函数执行时才产生的一系列变量的集合体。也就是说作用域定义了执行上下文中的变量的访问规则，执行上下文是在这个作用域规则的前提下执行代码的。
Js中的Function类型_设置函数的作用域
先声明一个name变量，然后声明一个person对象，person包含name和sayName属性。当直接在对象上进行方法的调用时：person.sayName()，函数的作用域遵循“谁调用就是谁”的原则，sayName的作用域（也就是this）指向的就是person。
ES5中模仿块级作用域
有一定JavaScript开发经验的人应该会熟悉下面这种立即执行函数的写法：不过即使不熟悉也没关系，这里我会讲解这种写法的含义。先来看下面这个更容易理解的示例：
作用域 CSS 回来了
几年前，消失的作用域 CSS，如今它回来了，而且比以前的版本要好得多。更好的是，W3C规范基本稳定，现在Chrome中已经有一个工作原型。我们只需要社区稍微关注一下，引诱其他浏览器构建它们的实现
Js静态作用域和动态作用域
静态作用域指的是一段代码，在它执行之前就已经确定了它的作用域，简单来说就是在执行之前就确定了它可以应用哪些地方的作用域(变量)。 动态作用域–函数的作用域是在函数调用的时候才决定的
深入理解 JavaScript, 从作用域与作用域链开始
作用域是你的代码在运行时,某些特定部分中的变量,函数和对象的可访问性。换句话说，作用域决定了变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。
Js作用链、作用域
函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合
不只是块级作用域，你不知道的let和const
ES6新增了两个重要的关键字let和const，相信大家都不陌生，但是包括我在内，在系统学习ES6之前也只使用到了【不存在变量提升】这个特性。let声明一个块级作用域的本地变量
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!