Vue watch 응답 데이터 구현 방법 분석

vue에서watch를 사용하여 데이터의 변화에 응답합니다.watch의 용법은 대략 세 가지가 있다.다음 코드는 watch의 간단한 사용법입니다.<input type="text" v-model="cityName"/>

new Vue({
 el: '#root',
 data: {
  cityName: 'shanghai'
 },
 watch: {
  cityName(newName, oldName) {
   // ...
  }
 } 
})

cityName 값이 바뀔 때마다 감청 처리 함수를 직접 씁니다.수신된 데이터 뒤에 문자열 형식의 메소드 이름을 직접 추가할 수도 있습니다.

watch: {
  cityName: 'nameChange'
  }
 } 

immediate와handler
이렇게 watch를 사용할 때 하나의 특징은 값이 처음 귀속될 때 감청 함수를 실행하지 않고 값이 바뀌어야 실행하는 것이다.만약 우리가 최초 귀속 값을 실행할 때도 함수를 실행해야 한다면immediate 속성을 사용해야 한다.
예를 들어 부모 구성 요소가 하위 구성 요소에 동적으로 값을 전달할 때, 하위 구성 요소props가 부모 구성 요소가 전송하는 기본값을 처음 가져올 때, 함수를 실행해야 합니다. 이 때immediate를true로 설정해야 합니다.

new Vue({
 el: '#root',
 data: {
  cityName: ''
 },
 watch: {
  cityName: {
  　　handler(newName, oldName) {
   　　// ...
  　　},
  　　immediate: true
  }
 } 
})

감청된 데이터 뒤에 대상 형식으로 쓰여handler방법과immediate를 포함하는데 이전에 우리가 쓴 함수는 사실 이handler방법을 쓰는 것이다.
immediate는watch에서 처음 귀속되었을 때handler를 실행할지 여부를 나타냅니다. 값이true일 때는watch에서 설명할 때handler 방법을 즉시 실행합니다. 값이false일 때는watch를 사용하는 것과 같이 데이터가 변할 때handler를 실행합니다.
deep
하나의 대상의 변화를 감청해야 할 때 일반적인watch 방법은 대상 내부 속성의 변화를 감청할 수 없고 데이터의 데이터만 변화를 감청할 수 있으며 이때 deep 속성이 대상을 깊이 감청해야 한다.<input type="text" v-model="cityName.name"/>

new Vue({
 el: '#root',
 data: {
  cityName: {id: 1, name: 'shanghai'}
 },
 watch: {
  cityName: {
   handler(newName, oldName) {
   // ...
  },
  deep: true,
  immediate: true
  }
 } 
})

deep: true를 설정하면 cityName이 표시됩니다.name의 변화는cityName의 모든 속성에 이 감청기를 추가합니다. 대상의 속성이 많을 때 모든 속성 값의 변화는handler를 실행합니다.객체의 속성 값 중 하나만 감청하면 다음과 같이 최적화할 수 있습니다. 문자열 형식으로 객체 속성을 감청하려면 다음과 같이 하십시오.

watch: {
  'cityName.name': {
   handler(newName, oldName) {
   // ...
   },
   deep: true,
   immediate: true
  }
 }

이렇게 하면 대상의 특정한 속성에만 감청기를 넣을 뿐이다.
수조(1차원, 다차원)의 변화는 깊이 감청을 통과할 필요가 없고, 대상 수조에서 대상의 속성 변화는 깊이 감청이 필요하다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.