(방법) Vue.js 컴포넌트(TypeScript)에서 액세스 수식자(퍼블릭, 프라이빗 등)를 사용해야 합니까?

(방법) Vue.js 컴포넌트(TypeScript)에서 액세스 수식자(퍼블릭, 프라이빗 등)를 사용해야 합니까?

TypeScript v.4.3을 사용한 Vue.js v2.6 프로젝트가 있습니다.
문제:사용할 수 있는 문서를 찾을 수 없습니다.access modifiersVue 컴포넌트와 올바르게 사용하는 방법에 대해 설명합니다.
기사, Vue.js 문서 및 StackOverflow를 검색했지만 아무 결과도 없었습니다.(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 컴포넌트에서 액세스 수식어의 의미를 확인하는 사실이 있다고 생각합니다.나는 그것들을 모두 생략하는 것에 강한, 어쩌면 비이성적인 거부감이 있다.

Btw: Rider로 코딩하고 있는데, 액세스 수식자는 IDE 코드 분석에 도움이 될 수 있습니다.

코드에 코멘트한 퍼블릭 수식어인 Angular와 같이 동작하는 경우 템플릿이 이러한 퍼블릭 함수를 호출할 수 있는지 확인합니다.

아마도 다른 개발자들이 말하는 것처럼, @refs를 사용하는 경우(필요하다면 스파게티 코딩이 될 가능성이 높습니다)

메서드에 개인 마크를 붙이는 것은 "이것은 템플릿에 속하지 않습니다"라는 표현일 뿐입니다.

클래스가 강제되는 이러한 「프런트 엔드 시나리오」에서는, 액세스 장치를 사용하면 가독성이 향상됩니다(및 혼란:D).

이 질문은 다른 분야에서는 대답되지 않았습니다.그것은 상식이나 스타일 때문입니다.또한 2센트는 템플릿을 타겟으로 하고 싶지 않을 때 프라이빗을 사용하는 것입니다.코드 가독성을 높이기 위해서입니다.

참고로, 저는 vue와 typescript를 3년간 사용해 왔습니다.한 가지 말씀드릴 수 있는 것은 vue 클래스의 컴포넌트 Bloatware, 특히 vue3에서 항상 볼 수 있었습니다.Vue2 및 3은 클래스 컴포넌트를 필요로 하지 않고 뛰어난 타이프 스크립트를 지원합니다.

프로젝트에서 퍼블릭/프라이빗 액세스 수식자는 컴포넌트가 다른 컴포넌트에서 참조될 때(예:@Ref프로퍼티 데코레이터)

TypeScript의public/private액세스 수식자는 변환된 출력에 영향을 주지 않기 때문에 Vue의 에코시스템 내에서는 영향을 주지 않습니다.계속 사용할 수 있지만 속성 액세스 오류를 제공하여 개발 중에만 도움이 됩니다.

참조: Vue.js에 대한 TypeScript 지원

이 확장 기능은 VSCode에만 적용되지만 원하는 대로 조정됩니다. https://github.com/prograhammer/vscode-tslint-vue

퍼블릭/프라이빗 수식자는 액세스 가능한 항목과 액세스 불가능한 항목을 논리적으로 구분하고 싶을 때 사용됩니다.예를 들어 객체 지향 프로그래밍에서는 객체의 속성을 프라이빗하게 선언합니다.이는 사용자가 이러한 속성에 직접 액세스하지 않기 때문입니다.대신 이러한 Atribute를 변경하거나 Atribute에 액세스하기 위한 액션을 수행합니다.이것은 단지 오래된 프로그래밍 패러다임일 뿐이다.

제가 학생들에게 드리는 예는 예를 들어, 실제 세계의 사물을 고려하는 것입니다.연필을 예로 들어보자.그 속성을 정의하고 OK라고 말합니다.연필에는 길이, 선명도, 색상이 있습니다.

이러한 속성(길이, 선명도 및 색상)에는 모두 private라는 수식어가 붙습니다.이는 이러한 속성을 마법처럼 변경할 수 없기 때문입니다.이러한 속성을 공개하면 다음과 같은 작업을 수행할 수 있습니다.

pencil.color = "blue";

그리고 갑자기 우리 연필이 파란색이 되었다.하지만 우린 우리가 어떻게, 왜 여기 왔는지 몰라요.연필 색이 저절로 변해요.이 점에 도달하기 위해 필요한 프로세스, 기능 또는 방법을 무시했습니다.

그 대신, 매우 기본적인 수준에서 연필의 색상을 얻거나 설정합니다.이것은 또 다른 오래된 객체 지향 패러다임입니다.게터와 세터(전혀 다른 논의)입니다.이 함수는 오브젝트가 실행할 수 있거나 오브젝트에 대해 실행한 액션을 대표하기 때문에 공개로 선언됩니다.이렇게 하면 모든 연필을 파란색으로 칠하려면 코드 내 다른 곳에 다음과 같이 할 수 있습니다.

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

이렇게 해서 p라고 부르는 연필 하나하나에 대해 (펜슬페어리의 최근 제품에서 취득한) 파란색으로 칠하고 싶습니다.연필 클래스에서는 연필을 그리는 방법을 정의하는 데 필요한 논리가 정의됩니다.

TLDR; You use private to define something's attributes because things outside of that object should not be able to mystically and magically modify those attributes, and you use public to define the functions or methods that can be performed on/by/to that object, and those actions can modify those attributes or return some other info based on those attributes, etc.

EDIT: Rereading the question, I'm sure you know most of this already. Just providing my hot take on how I decide when and where something should be public/private.

ReferenceURL : https://stackoverflow.com/questions/68648643/how-should-i-use-access-modifiers-public-private-etc-in-vue-js-components