Vue.js 데이터 속성을 인수로 전달하지 않고 메서드 내에서 사용하는 것이 잘못되었습니까?

Vue.js 데이터 속성을 인수로 전달하지 않고 메서드 내에서 사용하는 것이 잘못되었습니까?

다음의 2개의 시나리오가 있다고 가정합니다.

시나리오 1:

data(){
    return {
        number: 2
    }
},
methods: {
    multiplyByTwo(number){
        return number*2
    }
},
mounted(){
    this.multiplyByTwo(this.number)
}

시나리오 2:

data(){
    return {
        number: 2
    }
},
methods: {
    multiplyByTwo(){
        return this.number*2
    }
},
mounted(){
    this.multiplyByTwo()
}

보시다시피 두 경우 모두 함수가 multiplyBy입니다.2는 2를 곱한 데이터 번호 속성을 반환하지만, 첫 번째 시나리오에서는 데이터 번호 속성을 함수의 인수로 전달하고, 두 번째 시나리오에서는 데이터 번호 속성을 인수로 전달하지 않고 함수 내부에서 데이터 번호 속성에 바로 액세스합니다.

지금 나는 그 방법들 중 하나가 다른 방법보다 나은지 나쁜지 궁금하다.시나리오 2는 데이터 속성 번호가 있어야 사용할 수 있기 때문에 유연성이 떨어진다고 생각합니다.

반면 첫 번째 시나리오의 메서드는 인수로 넘길 필요가 있기 때문에 어디서나 재사용할 수 있습니다.

슬프게도 저는 Vue.js 어플리케이션에서 시나리오 2를 많이 사용했는데, 만약 코드가 잘못 작성되었다면 몇 가지 방법을 다시 쓸까 생각 중입니다.

상황에 따라 다르죠.

• 메서드가 부작용이 없고 컴포넌트 상태에서 항상 작동하지 않을 수 있는 경우에는 필요한 인수를 모두 통과해야 합니다.만약 그렇다면 이것은 말이 될 것이다.multiplyByTwo(this.number)그리고.multiplyByTwo(4)둘 다 똑같았어요.

• 만약 당신의 예처럼 그 방법이 부작용이 있고 내부 상태에서만 작동한다면, 그것은 판단의 결정이라고 생각합니다.그러나 이름을 선택하면 더 명확해집니다.내가 읽으면doubleTheCurrentNumber파라미터가 부족해도 놀라지 않을 겁니다.

• 메서드가 항상 내부 상태에서 작동하는 경우 상태 변수를 인수로 전달하는 것은 의미가 없습니다.예를 들어 다음과 같습니다.insertDocument()는 폼 작성에 따라 API 콜을 발신할 수 있습니다.

• 작업 결과가 반응적이어야 하지만 직접 호출되지 않는 경우 계산된 속성을 원할 수 있습니다.필터링된 목록은 계산된 속성의 좋은 예입니다.

당신이 값을 수정하지 않기 때문에 둘 다 같아야 한다고 생각합니다.

그런 경우에 최선의 접근법은 그들의 특성을 이용하는 것이라고 생각합니다.

언급URL : https://stackoverflow.com/questions/57664050/is-it-wrong-to-use-a-vue-js-data-property-inside-a-method-without-passing-it-as