Vue에서 watch를 사용하는 방법에 대한 자세한 설명은 무엇입니까? 시계 사용법 소개

Vue에서는 watch를 사용하여 데이터 변경에 대응합니다. 시계를 사용하는 방법은 대략 3가지가 있습니다. 다음 코드는 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가 상위 구성 요소에서 기본값을 먼저 가져오면 이 때 즉시 함수를 설정해야 합니다. 사실로.

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

모니터링된 데이터는 나중에 핸들러 메서드와 즉시를 포함하여 객체 형식으로 작성됩니다. 이전에 작성한 함수는 실제로 이 핸들러 메서드를 작성하는 것입니다.

immediate는 시계에 처음 바인딩될 때 핸들러를 실행할지 여부를 나타냅니다. 값이 true 이면 watch 에 선언하면 바로 핸들러 메소드가 실행된다는 뜻이고, 값이 false 이면 평소 watch 를 사용하는 것처럼 데이터가 변경될 때 실행된다는 의미입니다.

deep

객체의 변경 사항을 모니터링해야 하는 경우 일반 감시 방법으로는 객체의 내부 속성 변경 사항을 모니터링할 수 없습니다. 이 경우 데이터에 포함된 데이터만 모니터링할 수 있습니다. 객체를 수정하려면 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
    }
  } 
})

cityName.name의 변경 사항을 모니터링하려면 deep: true로 설정합니다. 이때 이 리스너는 cityName의 모든 속성에 추가됩니다. 객체에 속성이 여러 개 있을 경우 속성 값이 변경될 때마다 핸들러가 실행됩니다. . 객체에서 하나의 속성 값만 수신해야 하는 경우 다음 최적화를 수행할 수 있습니다. 문자열 형식을 사용하여 객체 속성을 수신합니다.

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

이렇게 하면 객체의 특정 속성에만 리스너가 추가됩니다. .

배열의 변화(1차원, 다차원)에는 심층 모니터링이 필요하지 않지만, 객체 배열의 객체 속성 변화에는 심층 모니터링이 필요합니다.

위 내용은 Vue에서 watch를 사용하는 방법에 대한 자세한 설명은 무엇입니까? 시계 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!