Vue.js$watch 방법 에 대한 깊 은 이해

블 로 거들 은 최근 vue.js 의 공식 튜 토리 얼 에 대해 독학 vue.js 를 하고 있 습 니 다.블 로 거들 은 어 렸 을 때 부터 어 리 석 었 습 니 다.튜 토리 얼 에서 정말 많은 것 을 이해 하지 못 했 습 니 다.다음 에 말 하고 자 하 는 이$watch 방법 은 그 중의 이해 하지 못 하 는 점 입 니 다.$watch 방법 이 vue.js API 에서 어떻게 설명 되 는 지 살 펴 보 자.Vue 인 스 턴 스 변 화 를 관찰 하 는 표현 식 이나 속성 함 수 를 계산 하 는 것 이다.리 셋 함수 에서 얻 은 매개 변 수 는 새 값 과 오래된 값 입 니 다.표현 식 은 감독 을 받 는 키 경로 만 받 습 니 다.더 복잡 한 표현 식 을 함수 로 대체 합 니 다.공식 예시:

//    
vm.$watch('a.b.c', function (newVal, oldVal) {
 //     
})
//   
vm.$watch(
 function () {
  return this.a + this.b
 },
 function (newVal, oldVal) {
  //     
 }
)

vm.$watch 에서 관찰 취소 함 수 를 되 돌려 줍 니 다.

var unwatch = vm.$watch('a', cb)
//       
unwatch()

블 로 거들 은 진지 하 게 보 았 지만 그 때 는 어리둥절 해서 알 아 보지 못 했다.다행히 인터넷 에 신 이 많아 서 찾 아 보 니 이$watch 방법의 용법 을 알 게 되 었 다.$watch 라 는 물건 은 값 의 변 화 를 관찰 하 는 것 입 니 다.이 값 의 변 화 를 관찰 하면 function 의 문 구 를 실행 합 니 다.쓸데없는 말 은 그만 하고 코드 를 직접 보 자.
HTML：

<div id="watch">
    firstName:<input type="text" name="li" v-model="firstName">
    <br>
    lastName:<input type="text" name="fei" v-model="lastName">
    <p>fullName: {{fullName}}</p>
</div>

JS：

var vm = new Vue({
      el: '#watch',
      data: {
        firstName: 'a',
        lastName: 'fei',
        fullName: 'a fei'
      },
      watch: {
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
          this.fullName = this.firstName + ' ' + val
        }
      }
})

코드 에 서 는 firstName 과 lastName 이라는 두 변 수 를 wach 방법 으로 감청 하 였 습 니 다.우 리 는 input 상자 에 더 블 바 인 딩 을 했 습 니 다.그러면 firstName 입력 상자 에 입력 한 값 은 변수 firstName 의 값 을 바 꾸 고 같은 이치 로 lastName 을 얻 을 수 있 습 니 다.값 의 변화 와 watch 라 는 물건 의 관찰 때문에 watch 안의 function 코드 가 실 행 됩 니 다.이렇게 fullName 도 그 만큼 달라 집 니 다.이렇게$watch 라 는 방법의 용법 도 단번에 밝 혀 졌 다.상술 한 예 에서$watch 는 원생 js 의 on-change 와 차이 가 많 지 않다.
이상 은 블 로 거들 이$watch 방법 에 대한 이해 입 니 다.이 방법 을 이해 하 는 데 도움 이 되 기 를 바 랍 니 다.만약 상술 한 것 이 잘못 되 었 다 면 여러분 께 서 많은 지적 을 해 주 셔 서 감사합니다.