作者:MichaelThiessen译者:前端小智来源:Michael点赞再看,养成习惯本文已收录到GitHubhttps://github.com/qq44924588。..以前好评文章的更多分类,也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。除了JS已经拥有的之外,Vue拥有自己独特的范围级别。范围控制可以使用哪些变量以及在何处使用。它控制它们对应用程序不同部分的“可见性”。了解Vue提供的范围级别之间的差异将帮助我们编写更清晰的代码。下面是vue中的4层作用域:全局作用域子树作用域组件作用域实例作用域看看这些作用域是什么。全局作用域Vue应用程序中的全局作用域类似于任何编程语言中的全局作用域,这些变量在应用程序的任何地方都可用。全局范围可以被认为是应用程序范围,因为它将范围限制为整个应用程序。使用全局作用域使用全局作用域的主要方式是给Vue原型添加一个值:Vue.prototype.$globalValue='GlobalScope!';通过将它添加到Vue对象的原型中,它可以在每个组件上自动使用。它可以像这样直接从组件访问:exportdefault{mounted(){console.log(this.$globalValue);//'全局范围!'},};在这些变量前加上$是标准做法,因此我们知道它们是全局值,而不是每个组件唯一的。Vue、vue-router和vuex(以及许多其他库)都使用这种技术来定义全局值。例如,来自vue-router的$route对象就是这样一个全局范围的变量。子树作用域大多数时候,全局作用域有点像一把大锤,我们需要更精确的东西。子树范围内的变量仅限于应用程序的特定部分,而不是整个应用程序。这个级别的范围可能是最少使用的,但在真正需要时非常方便。通常,一组组件需要共享很多相同的数据,而通过props传递数据是很繁琐的。这个作用域最好用于共享上下文信息,这些信息可以根据组件在应用程序中的位置而改变,可能是这样的:本地状态和数据——如果只有一小部分应用程序需要使用Vuex,则无需使用VuexVuex。如果通过props变得繁琐繁琐,此时subtreescope可能是我们最好的选择。配置——有时我们需要一个组件以某种方式运行,但仅在应用程序的一部分中。例如,注册表单中的所有输入组件都需要验证,但我们不想在整个应用程序中都需要验证。使用子树作用域子树作用域是使用提供和注入创建的。我们提供我们希望对整个子树可用的值,然后将它们注入到需要它们的组件中。组件作用域更具体一点,组件作用域使变量可用于各个组件。但这不应与更具体的实例范围混淆。如果变量具有组件作用域,则它是一个可用于组件的所有实例的单个变量。我们可以有几个相同的组件,它们都可以访问相同的变量。您可能熟悉JS中的模块作用域。在单个模块或文件中定义的任何内容都属于同一模块范围。由于组件是在单个文件中定义的,因此组件中的所有内容都在同一模块范围内。使用组件范围要使用组件范围,我们需要在与组件相同的文件中定义一个变量:
