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

当前第2页返回上一页

<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';
}

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

英文原文地址：https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e?gi=ce7b162d53d4
为了保证的可读性，本文采用意译而非直译。

相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程教学！！

以上就是详解vue.js中的4个级别作用域的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 详解vue.js中的4个级别作用域

实例作用域

使用实例作用域

相关推荐

评论