Vue 구성 요소의 함수형 계산 속성

계산된 속성은 내가 가장 좋아하는 Vue의 반응 패러다임 표현 중 하나입니다. 이를 통해 결과에 대한 참조를 저장할 수 있어 변경 추적을 추상화하고 템플릿에서 논리를 정리할 수 있습니다1.

때때로 계산된 속성은 복잡한 논리 단위, 루프 실행, 내부 데이터 구조 구축 및 최종적으로 결과를 만들어내는 것입니다. 하지만 더 자주, 문자열을 연결하고, 한 가지를 다른 것으로 곱하고, 특정 속성을 노출하기 위해 객체 배열을 매핑하는 등 더 간단한 일에 사용합니다. 화살표 기능이 만들어진 바로 그 종류의 작업입니다.

어떻게

함수형 계산 속성은 다음과 같은 방식으로 작성됩니다.

computed: {
  fullName: ({ firstName, lastName }) => firstName + ' ' + lastName
}

분해해 보겠습니다. 해당 계산된 속성의 일반 구문은 다음과 같습니다.

computed: {
  fullName () { 
    return this.firstName + ' ' + this.lastName
  }
}

나쁘지는 않지만 약간 장황합니다. Vue 구성 요소 외부에서 일반 구형 ES6을 작성하는 경우 이를 화살표 함수로 바꾸고 싶을 것입니다. 그러나 구성 요소 내부에서 다음 코드는 작동하지 않습니다.

// DOES NOT WORK

computed: {
  fullName: () => this.firstName + ' ' + this.lastName
}

화살표 함수의 핵심 기능은 그들bind their parent's lexical scope 이기 때문입니다. this 가 TypeError 임을 알려주는 this 로 끝날 것입니다.
따라서 우리는 컴포넌트undefined를 함수에 가져와야 한다는 것을 알고 있습니다. 하지만 어디서? Vue는 모든 계산된 속성의 유일한 인수로 전체 구성 요소를 주입한다는 것이 밝혀졌습니다! 정규 구문에서 this에 액세스하는 방법입니다. 다음과 같이 직접 테스트할 수 있습니다.

computed: {
  testThis () { 
    console.log(arguments)
  }
}

Javascript의 magical this 변수는 함수에 제공된 모든 인수의 배열을 나타냅니다. 구성 요소를 로드하면 단일 개체를 포함하는 배열이 콘솔에 표시됩니다. Vue 구성 요소에는 데이터, 계산, 메서드arguments 등이 포함됩니다.

이제 속성을 다음과 같이 작성할 수 있습니다.

computed: {
  fullName: (this) => this.firstName + ' ' + this.lastName
}

마지막 터치는 destructuring$root 입니다. 필요한 속성만 가져옵니다.

computed: {
  fullName: ({ firstName, lastName }) => firstName + ' ' + lastName
}

왜

그래서 우리는 무엇을 얻었습니까? 글쎄, 우선 우리는 3개의 라인을 강력한 1개의 라이너로 바꿨습니다. 우리는 이것이 부작용 없이 일부 값을 취하고 새 값을 반환하는 함수임을 분명히 했습니다. 마지막으로, 우리는 계산된 속성이 의존하고 추적하는 데이터를 명시적으로 만들었습니다. 구성 요소에 다른 데이터가 무엇이든 상관없이 이 속성은 우리가 제공한 값에만 의존할 수 있다는 것을 알고 있습니다.

계산된 속성이 많으면 훑어보고 추론하기가 더 쉽습니다.

computed: {
  fullName: ({ firstName, lastName }) => 
    firstName + ' ' + lastName,

  shortNameToDisplay: ({ firstName }) => 
    firstName || 'Please enter your name',

  isInFirstNamesList: ({ firstNamesList, firstName }) => 
    firstNamesList.indexOf(firstName) !== -1,

  // we can even call the fullName computed property, 
  // since it's available in the component as this.fullName
  nameUrl: ({ baseUrl, fullName }) => 
    baseUrl + '/' + fullName.toLowerCase(),
}

훌륭한 사용 사례는 프리젠테이션 구성 요소의 템플릿을 단순화하기 위해 props를 '구조화'하는 것입니다.

<template>
  <img :src="photoUrl">
  <h3>{{ firstName }}</h3>
  <p>{{ bio }}</p>
</template>

<script>
export default {
  name: 'PersonCard',
  props: {
    person: { type: Object }
  },
  data () {
    baseUrl: 'https://foo.bar/baz'
  },
  computed: {
    firstName: ({ person }) => person.firstName,
    bio: ({ person }) => person.bio,
    photoUrl: ({ baseUrl, person }) => baseUrl + '/' + person.photo
  }
}
</script>

언제

일반적으로 함수형 계산 속성(및 일반적으로 화살표 함수)은 논리가 단순하고 임시 변수가 필요하지 않을 때 가장 유용합니다. 귀하의 재산을 "저 물건과 관련된 이것"으로 생각한다면 아마도 좋은 후보일 것입니다.

반면에 기능 속성에 중괄호를 추가하고 로직을 실행하는 자신을 발견하자마자this 일반 구문으로 다시 리팩토링해야 할 때입니다. 여기에서 개선된 것은 오로지 코드 가독성에 대한 것이므로 항상 "이것이 더 이해하기 쉽습니까?"라는 질문이 있어야 합니다.



Vue style guide   ↩의 권장 사항에 따라