详解vue.js中的4个级别作用域-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

除了 JS 已有的功能外，Vue还具有自己独特的作用域级别。作用域控制可以使用哪些变量以及在何处使用。它控制它们对应用程序的不同部分的“可见性”。

了解 Vue 提供的作用域级别之间的差异会帮助我们编写更清晰的代码。

下面是 vue 中4个级别的作用域：

来看看这些作用域分别是什么。

全局作用域

Vue 应用程序中的全局作用域与任何编程语言中的全局作用域类似，这些变量在应用程序中的任何地方都是可用的。

可以把全局作用域看作应用程序作用域，因为它将作用域限制为整个应用程序。

使用全局作用域的主要方式是向Vue原型添加一个值：

1	`Vue.prototype.$globalValue =` `'Global Scope!';`

通过将其添加到 Vue 对象的原型中，可以在应用程序的每个组件上自动使用它。可以像这样直接从组件访问它：

export default {
  mounted() {
    console.log(this.$globalValue);  // 'Global Scope!'
  },
};

使用$作为这些变量的前缀是一种标准做法，因此我们知道它们是全局值，而不是每个组件唯一的。

Vue、vue-router和vuex(以及许多其他库)都使用这种技术来定义全局值。例如，来自vue-router的$route对象是这样一个全局作用域的变量。

大多数时候，全局范围有点像大锤，我们需要一些更精确的东西。子树作用域中的变量作用域是应用程序的特定部分，而不是整个应用程序。

此级别的作用域可能是最少使用的，但是在确实需要使用时非常方便。通常，一组组件需要共享很多相同的数据，并且通过props传递数据非常繁琐。

此作用域最适合用于共享上下文信息，这些上下文信息可以根据组件在应用程序中的位置进行更改，可以是这样的：

本地状态和数据-如果只有一小部分应用程序需要使用 Vuex，则无需使用 Vuex。如果使用props传递会变得繁琐且麻烦，此时，子树作用域可能是我们最好的选择。
配置-有时我们需要组件以某种特定方式运行，但仅在应用程序的一部分中运行。例如，注册表单中的所有Input组件都需要验证，但是我们不想在整个应用程序中都要求验证。