（如何）我应该在 Vue.js 组件（TypeScript）中使用访问修饰符（公共、私有等）吗？

Posted 2023-02-25

【中文标题】（如何）我应该在 Vue.js 组件（TypeScript）中使用访问修饰符（公共、私有等）吗？

【英文标题】：(How) Should I use access modifiers (public, private etc.) in Vue.js components (TypeScript)?

【发布时间】：2021-10-09 09:41:27

【问题描述】：

我有一个带有 TypeScript v.4.3 的 Vue.js v2.6 项目“幕后”。 我的问题：如果在 Vue 组件 中使用 access modifiers 是否有意义，以及如何正确使用它们，我找不到任何可以解决的文档。 我搜索了 Vue.js docs 和 *** 的文章，没有任何发现。 （Vue.js 文档完全忽略了它们的存在！）

这就是我目前在我的 Vue 组件中使用访问修饰符的方式：

myComponent.vue 的模板部分：

<template>
  <div>
    <!-- accessing some of the fields of the class here e.g. the getter -->
  </div>
</template>

myComponent.vue 的脚本部分：

<script lang="ts">
  import  Vue, Component, Prop, Emit  from "vue-property-decorator";

  @Component()
  export default class MyComponent extends Vue 
    @Prop() public readonly myPropertyVariable!: boolean;

    public myVariable!: string; // accessed in template

    private myInternalVariable!: boolean; // not accessed in template

    public get myGetterVariable(): string 
       // obviously accessed in template (getter)
    

    @Emit()
    public change(): void 

    @Action
    public doAction(): void 

    public mounted(): void 

    public myMethod(): boolean 
      // accessed in template
    

    private myInternalMethod(): boolean 
      // not accessed in template
    
  
</script>

我希望，这不是一个基于意见的问题。我假设有一个事实可以证实 Vue 组件中访问修饰符的意义。我有一种强烈的、可能是非理性的抗拒将它们全部省略。

顺便说一句：我在 Rider 中编码，访问修饰符可能对 IDE 代码分析有用。

【问题讨论】：

相关问题：***.com/questions/55339564/…（无答案）

【参考方案1】：

如果它像 Angular 一样工作，您在代码中注释的公共修饰符将确保您的模板可以调用这些公共函数。

也许正如其他开发人员所说，在@refs 的用例中。 （虽然如果你需要它们，你很有可能是意大利面条式编码）

将方法标记为私有只是表示“这不属于模板”的一种方式。

在这些类是强制的“前端场景”中，使用访问器只会增加可读性（和混乱：D）

这个问题在其他线程中没有得到回答，主要是因为它是常识和风格，我的 2 美分是，当你不想定位模板时使用 private，只是为了增加你的代码可读性。

顺便说一句，我使用 vue 和 typescript 已经 3 年了，我可以告诉你的一件事是，我总是发现 vue 类组件过时软件，尤其是在 vue3 中。 Vue2 和 3 支持出色的 typescript，无需任何类组件。

【讨论】：

感谢 Christiano，但模板似乎并不关心它使用的属性和方法是否被声明为公共或私有。无论哪种方式我都可以访问它们..

好吧，我认为这是事实，考虑到您的注释代码以及角度实际上是这样工作的事实。如果不是，那么它实际上只是关于可见性，但通常通过组件进行的通信以不同的方式发生。不管怎样，我都会搬家。

我的意思是，我会放弃类组件而只支持普通的 vue + typescript。

【参考方案2】：

我在我的项目中发现，公共/私有访问修饰符仅在您的组件被其他组件引用时才有用（例如，使用 @Ref 属性装饰器）

【讨论】：

谢谢。但是请您详细说明原因吗？

因为我还没有找到它们的其他用途，所以我真的不知道如何扩展它

我还想补充一点，在每种语言中，访问修饰符仅在使用类声明之外的对象时才有用。类似地，vue 访问修饰符在组件本身内部没有用，但只有在组件从外部Referenced 时才有用

【参考方案3】：

TypeScript 的 public/private 访问修饰符不会影响转译的输出，因此在 Vue 的生态系统中没有任何影响。您仍然可以使用它们，但它们只会在开发过程中通过提供属性访问错误来提供帮助。

见：TypeScript Support for Vue.js

此扩展是 VSCode 特有的，但似乎与您正在寻找的内容一致：https://github.com/prograhammer/vscode-tslint-vue

【讨论】：

无论我在哪里使用什么访问修饰符（例如，模板中使用的道具上的私有），我都没有一次收到属性访问错误...

我还阅读了您共享的文档，但那里甚至没有提到访问修饰符。坦率地说，它们只是被省略了。我真的认为他们应该努力写几句话，尤其是在类组件部分。

@jasie，我同意它被奇怪地省略了。我链接到那里主要是为了展示 Vue.js doesn't 对它做任何事情。至于遇到错误，我为您添加了第二个链接。

【参考方案4】：

Public/Private 修饰符用于在逻辑上区分可以访问和不可以访问的内容。例如，在面向对象编程中，我们将对象的属性声明为私有，因为您永远不会直接访问这些属性。相反，您执行一个操作来修改或访问这些属性。这只是一个旧的编程范式。

我给我的学生举的例子是考虑一个真实世界的物体。以铅笔为例。我们定义了它的属性，然后说好吧，铅笔有长度、锐度和颜色。

长度、锐度和颜色这些属性中的每一个都将以修饰符 private 开头，因为我们永远无法神奇地更改这些属性。如果我们将它们设为公共属性，我们可以这样做：

pencil.color = "blue";

突然我们的铅笔是蓝色的。但我们不知道我们是如何来到这里的，也不知道为什么。这是自发的铅笔颜色变化。我们忽略了达到这一点所需的过程或功能或方法。

因此，在一个非常基本的层面上，我们获取或设置铅笔的颜色。这是另一个古老的面向对象范例，阅读：getter 和 setter（这是一个完全不同的讨论）。然后这些函数将被声明为public，因为它们代表了对象可以执行或已经执行的操作。这样，如果您想在代码中的其他位置将所有铅笔都涂成蓝色，您可以这样做：

List<Pencil> my_pencils = pencilFairy.producePencils();
    for(Pencil p : my_pencils)
        p.paint("Blue");    
    

这样，对于我们称之为 p 的每一支铅笔（我们从 pencilFairy 最近生产的产品中获得），我们希望将铅笔涂成蓝色。然后在 Pencil 类中，定义如何绘制铅笔所需的逻辑。

TLDR;您使用 private 来定义某些东西的属性，因为该对象之外的东西不应该能够神秘地和神奇地修改这些属性，并且您使用 public 来定义可以在该对象上/由/对该对象执行的函数或方法，以及这些操作可以修改这些属性或根据这些属性返回一些其他信息等。

编辑：重读这个问题，我相信你已经知道大部分内容了。只是提供我对如何决定何时何地应该公开/私有的热门看法。

【讨论】：

感谢您的努力，但这个问题不是关于公共/私有的含义，而是关于它们在 vue.js 类组件中的好处和正确应用。