Vue에서 시계를 사용하는 방법

이번에는 Vue에서 watch를 사용하는 방법과 Vue에서 watch를 사용할 때의 주의사항에 대해 알려드리겠습니다.

다음 코드가 있다고 가정합니다.

<p>
   <p>FullName: {{fullName}}</p>
   <p>FirstName: <input type="text" v-model="firstName"></p>
</p>
new Vue({
 el: '#root',
 data: {
  firstName: 'Dawei',
  lastName: 'Lou',
  fullName: ''
 },
 watch: {
  firstName(newName, oldName) {
   this.fullName = newName + ' ' + this.lastName;
  }
 } 
})

위 코드의 효과는 firstName을 입력하면 wacth가 각 수정 사항의 새 값을 모니터링한 다음 fullName을 계산하여 출력한다는 것입니다.

핸들러 메소드 및 즉시속성

여기서 watch의 특징 중 하나는 처음 바인딩할 때 실행되지 않고, firstName이 변경될 때까지 모니터링 계산이 실행되지 않는다는 것입니다. 그렇다면 처음 바인딩될 때 변경 사항을 실행하려면 어떻게 해야 할까요? watch 작성 방법을 수정해야 합니다. 수정된 watch 코드는 다음과 같습니다.

watch: {
 firstName: {
  handler(newName, oldName) {
   this.fullName = newName + ' ' + this.lastName;
  },
  // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
  immediate: true
 }
}

핸들러를 확인하셨나요? 이전에 작성한 watch 메소드는 실제로 이 핸들러를 기본적으로 작성합니다. Node.js는 이 로직을 처리할 것이며 최종 컴파일된 버전은 실제로 이 핸들러입니다.

그리고 instant: true는 wacth에서 firstName이 선언되면 내부의 핸들러 메소드가 즉시 실행된다는 의미입니다. false인 경우 효과는 이전과 동일하며 바인딩 시 실행되지 않습니다.

deep attribute

watch에도 deep 속성이 있습니다. 기본값은 false이며, 이는 깊이 모니터링할지 여부를 나타냅니다. 예를 들어 데이터에 obj 속성이 있습니다. 입력 상자에서 뷰가 obj .a 값을 변경했는데 유효하지 않은 것으로 나타났습니다. 최신

JavaScript

(및 Object.observe 지원 중단)의 제한으로 인해 Vue는 객체 속성의 추가 또는 제거를 감지할 수 없습니다. Vue는 인스턴스를 초기화할 때 속성에 대해 getter/setter 변환 프로세스를 수행하므로 Vue가 응답할 수 있도록 변환하려면 속성이 데이터 객체에 존재해야 합니다. 기본적으로 핸들러는 obj 속성 참조의 변경 사항만 모니터링합니다. 예를 들어, Mounted

event

hook 함수에서 obj를 다시 할당합니다.

<p>
   <p>obj.a: {{obj.a}}</p>
   <p>obj.a: <input type="text" v-model="obj.a"></p>
</p>
new Vue({
 el: '#root',
 data: {
  obj: {
   a: 123
  }
 },
 watch: {
  obj: {
   handler(newName, oldName) {
     console.log('obj.a changed');
   },
   immediate: true
  }
 } 
})

우리 핸들러가 실행되고 변경된 obj.a가 인쇄됩니다.

반대로, obj에서 속성 a의 값을 모니터링해야 한다면 어떻게 될까요? 이럴 때 deep 속성이 유용하게 쓰입니다!

mounted: {
 this.obj = {
  a: '456'
 }
}

deep은 리스너가 레이어별로 탐색하고 이 리스너를 객체의 모든 속성에 추가한다는 것을 의미합니다. 그러나 obj의 모든 속성을 수정하면 이 리스너의 핸들러가 매우 커집니다. 트리거되었습니다.

최적화,

문자열

양식 모니터링을 사용할 수 있습니다.

watch: {
 obj: {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true,
  deep: true
 }
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS를 사용하여 문자열에 포함된 콘텐츠를 결정하는 방법 요약

Angular+RouterLink를 사용하여 다양한 멋진 점프 만들기

위 내용은 Vue에서 시계를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!