vue.js에서 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차원, 다차원)에는 심층 모니터링이 필요하지 않지만, 객체 배열의 객체 속성 변화에는 심층 모니터링이 필요합니다.

관련 권장 사항:

2020 프론트엔드 vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 권장 사항: 2020년 최신 5 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 원하시면 문의하세요. 방문: 프로그래밍 입문! !

위 내용은 vue.js에서 watch 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!