vue 의 watcher

관찰자
계산 속성 은 대부분의 경우 에 적합 하지만 사용자 정의 watcher 가 필요 할 때 도 있 습 니 다.Vue 가 더 일반적인 방법 을 제공 하 는 이 유 는 watch 옵션 을 통 해 데이터 의 변화 에 응답 하 는 것 입 니 다.데이터 변화 응답 을 할 때 비동기 작업 을 하거나 비용 이 많이 드 는 작업 을 수행 하 는 것 이 유용 합 니 다.
여러분 은 watch 에 대해 낯 설 지 않 을 것 입 니 다.프로젝트 에서 다음 과 같은 문법 을 사용 한 적 이 있 습 니 다.

watch: {
 someProp () {
  // do something
 }
}
//   
watch: {
 someProp: {
  deep: true,
  handler () {
   // do something
  }
 }
}

위의 쓰기 방법 은 vue 에 게 someProp 속성의 변 화 를 감청 해 야 한다 고 알려 주 었 습 니 다.그래서 vue 는 내부 에서 우 리 를 위해 watcher 대상 을 만 들 것 입 니 다.(편폭 에 한 하여 우 리 는 watcher 의 구체 적 인 실현 에 대해 이야기 하지 않 고 관심 이 있 는 것 은 직접 볼 수 있다소스 코드 워 치.
그러나 vue 에서 watcher 의 기능 은 이렇게 단일 하지 않 습 니 다.먼저 상단 코드:

<template>
 <div>
  <p>a: {{ a }}</p>
  <p>b: {{ b }}</p>
  <button @click="increment">+</button>
 </div>
</template>
<script>
export default {
 data () {
  return {
   a: 1
  }
 },
 computed: {
  b () {
   return this.a * 2
  }
 },
 watch: {
  a () {
    console.log('a is changed')
  }
 },
 methods: {
  increment () {
   this.a += 1
  }
 },
 created () {
  console.log(this._watchers)
 }
}
</script>

온라인 데모
위의 코드 는 매우 간단 합 니 다.우 리 는 현재 created 갈고리 에 인쇄 된 this. 에 주목 하고 있 습 니 다.watchers,아래 와 같 습 니 다:
각각 세 개의 watcher 를 펼 치고 모든 expression 을 관찰 하 며 위 에서 아래로 각각:

b() {   return this.a * 2;↵  }
"a"
function () {   vm._update(vm._render(), hydrating);↵  }

위의 세 개의 watcher 는 세 가지 서로 다른 기능 의 watcher 를 대표 하 는데 우 리 는 이 를 기능 에 따라 세 가지 로 나 누 었 다.

watch 에서 정 의 된 속성 변 화 를 감청 하 는 watcher(두 번 째)

컴퓨터 속성 에 사용 되 는 watcher(첫 번 째)

페이지 업데이트 에 사용 되 는 watcher(세 번 째)

normal-watcher
우리 가 watch 에서 정의 하 는 것 은 모두 이런 유형 에 속 합 니 다.즉,감청 의 속성 이 바 뀌 면 정 의 된 반전 함수 가 실 행 됩 니 다.
computed-watcher
모든 coptute d 속성 은 마지막 에 해당 하 는 watcher 대상 을 생 성 합 니 다.그러나 이런 watcher 는 특징 이 있 습 니 다.우 리 는 위의 b 예 를 들 어:
속성 b 는 a 에 의존 합 니 다.a 가 바 뀌 었 을 때 b 는 즉시 다시 계산 하지 않 습 니 다.그 후에 다른 곳 에서 b 를 읽 어야 만 진정 으로 계산 할 수 있 습 니 다.즉,lazy(게 으 른 계산)특성 을 가지 고 있 습 니 다.
render-watcher
모든 구성 요 소 는 데이터/coputed 가 있 을 때 render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }하나 가 있 습 니 다.
속성 이 바 뀌 었 을 때 이 render-watcher 를 사용 하여 구성 요소 의 보 기 를 업데이트 합 니 다.
세 가지 watcher 의 실행 순서
기능 상의 차 이 를 제외 하고 이 세 가지 watcher 도 고정된 집행 순서 가 있 는데 그것 이 바로 다음 과 같다.

computed-render -> normal-watcher -> render-watcher

이러한 안 배 는 이유 가 있 습 니 다.가능 한 한 보증 할 수 있 습 니 다.구성 요소 보 기 를 업데이트 할 때 coptute d 속성 은 이미 최신 값 입 니 다.render-watcher 가 coptute-render 앞 에 있 으 면 페이지 가 업 데 이 트 될 때 coptute d 값 이 오래된 데이터 입 니 다.
다음은 인 스 턴 스 코드 에서 vue 의 watcher 를 보 겠 습 니 다.
이 예제 에서 watch 옵션 을 사용 하면 비동기 작업 을 수행 할 수 있 습 니 다(API 에 접근).이 작업 을 수행 하 는 빈 도 를 제한 하고 최종 결 과 를 얻 기 전에 중간 상 태 를 설정 합 니 다.이것 은 속성 을 계산 해서 할 수 없 는 것 이다.

<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<!-- Since there is already a rich ecosystem of ajax libraries -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also -->
<!-- gives you the freedom to just use what you're familiar with. -->
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
 //    question     ，        
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
 // _.debounce       lodash          。
 //       ，        yesno.wtf/api   
 // ajax              
 //        _.debounce function (and its cousin
// _.throttle),   : https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
var vm = this
if (this.question.indexOf('?') === -1) {
vm.answer = 'Questions usually contain a question mark. ;-)'
return
}
vm.answer = 'Thinking...'
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
//                  
500
)
}
})
</script>

작은 매듭
본 고 는 소스 코드 해석 류 글 이 아니 라 한 측면 에서 이 야 기 를 나 누 는 것 입 니 다.관련 이 없 는 것 처럼 보 이 는 것들(coptute/watch/페이지 업데이트)은 내부 적 으로 밀접 한 관 계 를 가지 고 있 습 니 다.벽돌 을 던 져 옥 을 끌 어 올 려 사람들 로 하여 금 vue 를 더욱 깊이 탐색 하 게 하고 싶 습 니 다.