Vue 프로젝트에서 데이터의 심도 있는 감청 또는 객체 속성에 대한 감청 인스턴스

모두가 알다시피 vue 프로젝트에서 데이터에 대한 감청은 좋은 갈고리watch를 제공했다. watch는 우리가 자주 사용하는 데이터 형식 값의 변화를 매우 편리하게 감청할 수 있지만 보통 우리가 한 대상의 어떤 속성 값의 변화를 감청하고 싶을 때 우리가 예상한 효과에 도달하기 어렵다.vue의 문서에 따르면 데이터의 깊이 있는 감청을 사용하여 이 효과를 얻을 수 있음을 발견하기 어렵지 않다.구체적인 실현은 다음과 같다.

watch: {
  evlist: {
  handler(val, oldVal) {
   this.isTeam = val.projectParty;
   this.pjtid = val.pjtid;
   this.isFinish = val.projectSelfValue;
  },
  deep: true
  },
 
 },

그 중에서 evlist는 하나의 대상이다.val은 변화 후의 값을 감청하고,oldVal은 변화 전의 값이다.
보충 지식: vue의 감청 속성과 계산 속성
계산 속성 (computed)
vue의 계산 속성은 매우 좋은 것으로 논리와 변수를 겸비하고 있다.우리는 더 이상 시각층에 관심을 가지지 않고, 값은 코드의 논리에 관심을 가지면 된다.데이터가 어떻게 표시되는지는 Vue가 책임지고 우리의 참여가 필요하지 않습니다.
따라서 계산 속성을 사용할지 감시 속성을 사용할지 선택할 경우 계산 속성을 우선적으로 선택합니다

  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

export default {
  data(){
   return { 
    message: 'Hello',
   }
  },
  computed: {
   reversedMessage: function () {
    return this.message.split('').reverse().join('');
   }
  }

우리가 사용하는 계산 속성이 템플릿 내 표현식의 기능을 대체하는 것을 볼 수 있다.따라서 어떤 복잡한 논리에 대해서도 계산 속성을 사용해야 한다.그리고 계산 속성은 우리로 하여금 논리적 실현에만 관심을 가지게 하고 후기의 데이터가 인터페이스에서의 표시 형식은 바로 Vue에 의해 이루어진다.js가 책임지고 독자들은 우리가 직접 페이지 전시에 참여하지 않은 것을 볼 수 있다
그 밖에 전통적인 표현식을 통해 값을 구하는 방식은 우리가 스스로 값을 받아야 하고 계산 속성은 그들의 의존을 바탕으로 캐시를 해야 한다.관련 의존이 바뀔 때만 다시 값을 구할 수 있다.즉, 계산 속성은 캐시에서 직접 값을 가져와 값의 변화에 따라 바뀐다.전통적인 표현식을 통해 직접 값을 구하는 방식은 우리가 값을 받기 전에 getter () 함수를 실행해야 한다
감청 속성 (watch)
감청 속성의 실질은 비동기적인 리셋이다. 독자가 감청 속성을 사용할 생각을 하기 전에 계산 속성으로 감청 속성을 대체할 수 있는지 많이 고려하기를 바란다
동일한 기능 대비 구현

// 
computed: {
  fullName2: function () {
    return this.firstName + ' ' + this.lastName
  }
}
// 
watch: {
   firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
    this.fullName = this.firstName + ' ' + val
  }
} 

속성을 계산하는 코드가 더욱 간결하고 효율적이며 효과를 실현하는 데 있어 뚜렷한 속성을 계산하는 것이 더욱 좋다는 것을 볼 수 있다
상기 Vue 프로젝트에서 데이터의 심도 있는 감청 또는 대상 속성의 감청 실례는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분에게 참고가 될 수 있고 저희를 많이 사랑해 주시기 바랍니다.