VueJs, 계산된 자산과 감시자의 차이점?

VueJs, 계산된 자산과 감시자의 차이점?

Vue.js 매뉴얼에는 다음과 같은 예가 있습니다.

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

위의 코드는 필수적이며 반복적입니다.계산된 속성 버전과 비교해 보십시오.

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

관찰자가 계산된 특성보다 더 적합한 상황은 무엇입니까?어떤 것을 선택할지 어떻게 결정해야 하나요?문서에서는 이것이 더 "일반적"이라고 계속 말하고 있지만, 실제로 그 목적을 제시하지는 않습니다.

계산된 속성

계산된 속성 샘플:

computed: {
   val () {
     return this.someDataProperty * someOtherVariable
   }
}

이 특별한 코드 조각이 무엇을 하나요?

1. 다음과 같은 속성을 만듭니다.val(프로토타입에 기재되어 있습니다)

2. 이 경우 반응 속성(데이터 속성, 기타 계산된 속성)으로 구성된 종속성 트리가 있습니다.this.someDataProperty즉, 종속성이 변경되는 순간 계산된 속성이 다시 계산됩니다.

3. 논의되긴 하지만, 논쟁에 넘겨서는 안 된다.그래서 뭐랄까...

   computed: {
     val (flag) {
       return (flag === 1) 
         ? this.someDataProperty * someOtherVariable 
         : this.someDataProperty * 5
       }
   }
   

   할 수 없음.

[편집] 참조:https://vuejs.org/v2/guide/computed.html#Computed-Setter

감시자

감시자 샘플:

watch: {
   val (n, o) {
     console.log(n, o)
   }
}

1. 새 속성을 생성하지는 않지만 반응형 속성에서 변경 사항을 관찰합니다.

2. 종속 속성 변경으로 인해 재계산이 발생할 수 있는 계산과는 달리 하나의 특정 속성만 감시합니다.

3. 새로운 값과 오래된 값의 인수가 있습니다.

---

따라서 다음과 같은 경우 계산된 속성을 사용하는 것이 좋습니다.

항상 다른 속성에 의존하는 속성을 원합니다.템플릿의 텍스트 형식과 마찬가지로 코드의 예이기도 합니다.

또는 다음과 같이 가변 길이를 줄이는 것이 일반적입니다.

this.$store.state.someProperty.someNestedProperty.someDeeplyNestedProperty

다음과 같이 줄일 수 있습니다.

computed: {
  someDeeplyNestedProperty () {
     return this.$store.state.someProperty.someNestedProperty.someDeeplyNestedProperty
  }
}

크기를 뿐만 아니라 마다 최신 됩니다.someDeeplyNestedProperty.

---

또한 Watchers는 액션을 수행할 준비가 되었는지 확인하기 위해 하나의 반응 속성이 바람직한 값으로 변경되었는지 확인하고 싶을 때 유용합니다.

예를 들어 다음과 같습니다.

watch: {
  somethingSelected() {
    this.router.push('someOtherRoute')
  }
}

편집: Flavio Copes의 좋은 기사를 발견했습니다.각각의 일반적인 사용 사례(방법, 계산 소품, 감시자):

메서드를 사용하는 경우

• DOM에서 발생한 이벤트에 대응하려면

• 컴포넌트에 문제가 발생했을 때 함수를 호출합니다.계산된 속성 또는 워쳐에서 메서드를 호출할 수 있습니다.

계산된 속성을 사용해야 하는 경우

• 기존 데이터 원본에서 새 데이터를 구성해야 합니다.
• 템플릿에서 사용하는 변수가 하나 이상의 데이터 속성에서 작성되었습니다.
• 복잡하고 중첩된 속성 이름을 읽기 쉽고 사용하기 쉬운 이름으로 줄이고 원래 속성이 변경될 때 업데이트하려고 합니다.
• 템플릿의 값을 참조해야 합니다.이 경우 계산된 속성은 캐시되므로 생성하는 것이 가장 좋습니다.
• 둘 이상의 데이터 속성의 변경 내용을 수신해야 합니다.

watch를 사용하는 경우

• 데이터 속성이 변경될 때 수신하고 몇 가지 작업을 수행하려는 경우
• 프로포트의 가치변화를 듣고 싶다
• 특정 속성을 하나만 들으면 됩니다(한 번에 여러 속성을 볼 수 없음).
• 특정 값에 도달할 때까지 데이터 속성을 지켜본 다음 작업을 수행하려고 합니다.

계산된 속성에는 매우 구체적인 목적이 있습니다. 즉, 다른 데이터에서 파생된 새 데이터를 구성하는 것입니다.템플릿에서 사용하기 전에 변환, 필터링 또는 기타 조작이 필요할 때마다 사용됩니다.

계산된 속성은 항상 값을 반환해야 하며 부작용이 없어야 하며 동기화되어야 합니다.

따라서 컴포넌트가 프로펠러를 수신하고 프로펠이 변경될 때마다 컴포넌트가 Ajax 요청을 해야 하는 등 계산된 속성이 도움이 되지 않는 경우가 있습니다.이걸 하려면 감시자가 필요할 거야

워처는 계산된 속성만큼 유용하지 않으므로 계산된 속성이 문제를 해결할 수 있는지 항상 고려해야 하며 그렇지 않은 경우에는 워처(또는 메서드)에만 폴백해야 합니다.

값을 변환하거나 다른 값 변경에 따라 액션을 수행하는 경우 워처를 사용합니다.예를 들어 프로포트를 기반으로 값을 설정하고 변경에 대응하려는 경우를 들 수 있습니다.

Vue.component('my-comp',{
  template: '#my-comp',
  props: ['username'],
  created() {
    this.user = this.username;
  },
  watch:{
    username(val){
      this.user = val;
    }
  },
  data(){
    return{
      user: ''
    }
  }
});

다음 JSFiddle을 참조하십시오.https://jsfiddle.net/fjdjq7a8/

이 예는 값을 동기화하지 않기 때문에 다소 교묘하고 실제 환경에서는 제대로 작동하지 않습니다.다음은 오픈소스 프로젝트 중 하나에서 사용하는 실제 예입니다.

연산자는 데이터 자체를 임의로 조작하기 위한 것으로 문자열 연결이나 값 계산 등이 있습니다.

이 예에서는 계산된 속성이 실제로 더 낫다.와치터를 사용하는 예에서는, 다음의 코드 행에 주목하고 있습니다.

this.fullName = this.firstName + ' ' + val

다음과 매우 유사합니다.

this.fullName = val + ' ' + this.lastName

둘 다 동일한 목적을 수행하며 이름 또는 성이 변경되는지 확인하고 업데이트를 수행합니다.fullName따라서.하지만 이건 절대 변하지 않을 거고fullName에 의해 항상 구성될 것이다.firstName그리고.lastName소란을 피우고 계산된 속성을 만들 수 있습니다.그럼 매번firstName그리고.lastName바꾸다,fullName자동으로 업데이트됩니다.

하지만 감시자를 사용하는 것이 더 나은 경우도 있습니다.비동기 코드 쓰기를 진지하게 계산하려면 워처가 더 적합합니다.

예를 들어 다음과 같은 것이 있는 경우:

let app = new Vue({
    el: '#app',
    data: {
        name: ""
    }
});

그리고 네가 원할 때마다nameAPI 호출을 하려면 결과를 가져와 처리해야 합니다.그러면 워처가 더 적절합니다.

watchers: {
    "name": function(newValue, oldValue){
         if(newValue != oldValue)} {
            fetch(url, {method: 'post', body: JSON.stringify({name: this.name})}).then(...);
        }
    }
}

계산된 속성을 사용하여 이 작업을 수행하려면computed get()및 acomputed set()더 많은 코드를 만들 수 있는 속성입니다.

또한 문서의 예에서는 속성이 있습니다.fullName두 가지 다른 성질에 의해 계산된 a.k.a.로 구성됩니다.제 예에서는name는 문자 그대로 계산되지 않습니다.우리는 단지 그것을 관찰하고 싶기 때문에, 계산된 속성을 사용하는 것은 디자인 패턴이라기보다는 해킹에 가깝습니다.

구경하세요

데이터 변경에 대응하여 비동기식 또는 고비용 작업을 수행하려는 경우 watch를 사용하십시오.

계산했다

다른 경우에는 계산하여 사용합니다.계산된 속성은 종속성에 따라 캐시됩니다.주로 일부 종속성이 변경된 경우에만 재평가할 때 사용됩니다.

언급URL : https://stackoverflow.com/questions/43277705/vuejs-difference-between-computed-property-and-watcher