vue 中4个级别的做用域

做者：Michael Thiessen 译者：前端小智 来源：Michael

点赞再看，养成习惯

本文 GitHub github.com/qq449245884… 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

---

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

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

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

• 全局做用域
• 子树做用域
• 组件做用域
• 实例做用域

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

全局做用域

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

能够把全局做用域看做应用程序做用域，由于它将做用域限制为整个应用程序。

使用全局做用域

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

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组件都须要验证，可是咱们不想在整个应用程序中都要求验证。

使用子树做用域

子树做用域是经过使用provide和inject建立的。 咱们提供但愿可用于整个子树的值，而后将它们注入须要它们的组件中。

组件做用域

更具体一点，组件做用域使变量可用于单个组件。可是这不该该与更具体的实例做用域相混淆。

若是一个变量具备组件做用域，那么它就是一个组件的全部实例均可以使用的单个变量。咱们能够拥有几个相同的组件，而且它们都可以访问相同的变量。

你可能熟悉 JS 中的模块做用域。在单个模块或文件中定义的任何内容都属于相同的模块做用域。因为组件是在单个文件中定义的，因此组件中的全部内容都在相同的模块做用域内。

使用组件做用域

要使用组件做用域，咱们须要在与组件相同的文件中定义一个变量：

<template>
  <div class="new-component">
    {{ componentScope }}
  </div>
</template>

<script>
const componentScope = 'This is in the component scope';

export default {
  data() {
    return {
      componentScope: componentScope,
    };
  },
};
</script>
复制代码

在此组件中渲染的变量componentScope是相同的变量，无论使用此组件多少次，componentScope 始终只有一个，没有多个副本。

若是此组件的一个实例修改了componentScope的值，则该组件的每一个其余实例都会更改。 不该使用这种方式在组件之间进行通讯，但这是共享数据的一种好方法。

实例做用域

实例做用域是咱们能够得到的Vue做用域变量最多见形式，具备实例做用域的任何变量仅可用于组件的特定用法。 咱们一般将其称为内部状态，有时也称为局部状态。

使用实例做用域

不管什么时候使用data()函数或使用computed props，都是在使用实例做用域。

甚至直接向组件实例添加属性也能够达到如下效果：

someMethod() {
  this.newProperty = 'Instance scope';
}
复制代码

可是，若是以这种方式添加属性，则必须记住，它们不是响应式的。

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：frontendsociety.com/why-you-sho…

---

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

github.com/qq449245884…

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。