除了JS已有的功能,Vue还有自己独有的作用域层次。范围控制可以使用哪些变量以及在何处使用。它控制它们对应用程序不同部分的“可见性”。了解Vue提供的范围级别之间的差异将帮助我们编写更清晰的代码。下面是vue中的4个级别的作用域:全局作用域子树作用域组件作用域实例作用域让我们看看这些作用域是什么。1.全局作用域Vue应用程序中的全局作用域类似于任何编程语言中的全局作用域,这些变量在应用程序的任何地方都可用。全局范围可以被认为是应用程序范围,因为它将范围限制为整个应用程序。使用全局作用域使用全局作用域的主要方式是在Vue原型中添加一个值:Vue.prototype.$globalValue='GlobalScope!';通过将它添加到Vue对象的原型中,它可以在应用程序的每个组件中自动使用它。它可以像这样直接从组件访问:exportdefault{mounted(){console.log(this.$globalValue);//'GlobalScope!'},};在这些变量前加上$是标准做法,因此我们知道它们是全局值,而不是每个组件唯一的。Vue、vue-router和vuex(以及许多其他库)都使用这种技术来定义全局值。例如,来自vue-router的$route对象就是这样一个全局范围的变量。2.子树作用域大多数时候,全局作用域有点像一把大锤,我们需要更精确的东西。子树范围内的变量仅限于应用程序的特定部分,而不是整个应用程序。这个级别的范围可能是最少使用的,但在真正需要时非常方便。通常,一组组件需要共享很多相同的数据,而通过props传递数据是很繁琐的。这个作用域最好用于共享上下文信息,这些信息可以根据组件在应用程序中的位置而改变,可能是这样的:本地状态和数据——如果应用程序只有一小部分需要使用Vuex,那么就没有必要使用Vuex。如果通过props变得繁琐繁琐,此时subtreescope可能是我们最好的选择。配置——有时我们需要一个组件以某种方式运行,但仅在应用程序的一部分中。例如,注册表单中的所有输入组件都需要验证,但我们不想在整个应用程序中都需要验证。使用子树范围:子树范围是通过使用提供和注入创建的。我们提供我们希望对整个子树可用的值,然后将它们注入到需要它们的组件中。3.组件作用域更具体地说,组件作用域使变量对各个组件可用。但这不应与更具体的实例范围混淆。如果变量具有组件作用域,则它是一个可用于组件的所有实例的单个变量。我们可以有几个相同的组件,它们都可以访问相同的变量。您可能熟悉JS中的模块作用域。在单个模块或文件中定义的任何内容都属于同一模块范围。由于组件是在单个文件中定义的,因此组件中的所有内容都在同一模块范围内。使用组件作用域:要使用组件作用域,我们需要在组件同一个文件中定义一个变量:这个组件渲染的变量componentScope是同一个变量,不管这个组件被使用多少次,永远只有一个componentScope,没有多个副本。如果此组件的一个实例修改了componentScope的值,则此组件的所有其他实例都将更改。这不应该用于组件之间的通信,但它是共享数据的好方法。4.实例作用域实例作用域是我们可以获得的最常见的Vue作用域变量形式,任何具有实例作用域的变量仅可用于组件的特定用途。我们通常将其称为内部状态,有时也称为本地状态。使用实例范围:无论何时使用data()函数或使用计算道具,您都在使用实例范围。甚至直接给组件实例添加属性也能达到??效果:someMethod(){this.newProperty='Instancescope';}但是,如果以这种方式添加属性,必须记住它们不是响应式的。
