登录  /  注册
首页 > web前端 > Vue.js > 正文

详解vue.js中的4个级别作用域

青灯夜游
发布: 2020-12-08 18:01:44
转载
3207人浏览过

详解vue.js中的4个级别作用域

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

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

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

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

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

全局作用域

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

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

使用全局作用域

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

Vue.prototype.$globalValue = 'Global Scope!';
登录后复制

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

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

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

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

子树作用域

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

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

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

  • 本地状态和数据-如果只有一小部分应用程序需要使用 Vuex,则无需使用 Vuex。 如果使用props传递会变得繁琐且麻烦,此时,子树作用域可能是我们最好的选择。

  • 配置-有时我们需要组件以某种特定方式运行,但仅在应用程序的一部分中运行。 例如,注册表单中的所有Input组件都需要验证,但是我们不想在整个应用程序中都要求验证。

使用子树作用域

子树作用域是通过使用provideinject创建的。 我们提供希望可用于整个子树的值,然后将它们注入需要它们的组件中。

组件作用域

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

如果一个变量具有组件作用域,那么它就是一个组件的所有实例都可以使用的单个变量。我们可以拥有几个相同的组件,并且它们都能够访问相同的变量。

你可能熟悉 JS 中的模块作用域。在单个模块或文件中定义的任何内容都属于相同的模块作用域。由于组件是在单个文件中定义的,所以组件中的所有内容都在相同的模块作用域内。

使用组件作用域

要使用组件作用域,我们需要在与组件相同的文件中定义一个变量:

{{ componentScope }}

<script>const componentScope = &#39;This is in the component scope&#39;; export default { data() { return { componentScope: componentScope, }; }, };</script>" title="" data-original-title="复制">

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

<script>
const componentScope = &#39;This is in the component scope&#39;;

export default {
  data() {
    return {
      componentScope: componentScope,
    };
  },
};
</script>
登录后复制

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

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

实例作用域

实例作用域是我们可以获得的Vue作用域变量最常见形式,具有实例作用域的任何变量仅可用于组件的特定用法。 我们通常将其称为内部状态,有时也称为局部状态。

使用实例作用域

无论何时使用data()函数或使用computed props,都是在使用实例作用域。

甚至直接向组件实例添加属性也可以达到以下效果:

someMethod() {
  this.newProperty = &#39;Instance scope&#39;;
}
登录后复制

但是,如果以这种方式添加属性,则必须记住,它们不是响应式的。

英文原文地址:https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e?gi=ce7b162d53d4

为了保证的可读性,本文采用意译而非直译。

相关推荐:

2020年前端vue面试题大汇总(附答案)

vue教程推荐:2020最新的5个vue.js视频教程精选

更多编程相关知识,请访问:编程教学!!

以上就是详解vue.js中的4个级别作用域的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号