간단한 Vue.js 계산된 속성 설명

간단한 Vue.js 계산된 속성 설명

나는 Vue.js를 처음 접하는 것은 아니지만, 처음 놓친 것은 무엇이든 찾아내기 위해 다시 문서를 뒤지고 있다.계산된 속성 사용의 기본 예제 섹션에서 이 문구를 발견했다.

일반 속성처럼 템플릿에서 계산된 속성에 데이터 바인딩할 수 있다.Vue는 알고 있다.vm.reversedMessage에 달려 있다vm.message에 의존하는 모든 바인딩을 업데이트 할 것이다.vm.reversedMessage할 때vm.message변화들그리고 가장 좋은 부분은 이 의존 관계를 선언적으로 만들어냈다는 겁니다. 계산된 게터 기능은 부작용이 없기 때문에 테스트하고 이해하기 쉽다는 겁니다.

---

우리가 이 의존 관계를 선언적으로 만들어냈다는 부분은, 계산된 게터 함수는 부작용이 없고, 내가 보기에 분명하지 않다.부작용은 기능의 순수한 의도와 직접적인 관련이 없는 어떤 행동이라는 것은 이해하지만, 이 진술에서 그것이 어떻게 사용되고 있는지는 확실하지 않다.

그 반대일 수 있는 것을 누군가 더 설명해 주시겠습니까?일어날 수 있는 잠재적인 부작용은 무엇인가?

여기서 부작용이라는 용어는 계산된 속성 게이터에서 수행되는 데이터 변이를 가리킨다.예를 들면 다음과 같다.

export default {
  data() {
    return {
      firstName: 'john',
      lastName: 'doe',
      array: [1,2,3]
    }
  },
  computed: {
    fullName() {
      this.firstName = 'jane'; // SIDE EFFECT - mutates a data property
      return `${this.firstName} ${this.lastName}`
    },
    reversedArray() {
      return this.array.reverse(); // SIDE EFFECT - mutates a data property
    }
  }
}

어떻게 하는지 주목하라fullName돌연변이를 일으키다firstName그리고reversedArray돌연변이를 일으키다array. ESLint를 사용할 경우(예: Vue CLI 생성 프로젝트에서) 다음 경고가 표시됨:

[eslint] Unexpected side effect in "fullName" computed property. (vue/no-side-effects-in-computed-properties)
[eslint] Unexpected side effect in "reversedArray" computed property. (vue/no-side-effects-in-computed-properties)

데모를 하다

참조URL: https://stackoverflow.com/questions/52458203/simple-vue-js-computed-properties-clarification