vue의 watcher에 대한 자세한 설명-JS 튜토리얼-php.cn

vue의 watcher에 대한 자세한 설명

PHPz

풀어 주다： 2018-09-30 16:38:15

원래의

6717명이 탐색했습니다.

대부분의 경우 계산된 속성이 더 적합하지만 때로는 사용자 정의 감시자가 필요할 수도 있습니다. 이것이 Vue가 watch 옵션을 통해 데이터 변경에 응답하는 보다 일반적인 방법을 제공하는 이유입니다. 이는 데이터 변경에 대한 응답으로 비동기식 또는 비용이 많이 드는 작업을 수행하려는 경우 유용합니다. 이 글은 vue에 있는 watcher의 관련 정보를 주로 소개하고 있으니 필요한 친구들이 참고하시면 도움이 될 것 같습니다.

모두가 watch에 익숙할 것입니다. 그들은 모두 프로젝트에서 다음 작성 방법을 사용했습니다:

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

로그인 후 복사

위의 작성 방법은 Vue에게 일부 Prop 속성의 변경 사항을 모니터링해야 함을 알려주므로 Vue는 감시자 객체를 생성합니다. 우리 내부적으로는 . (공간의 제약으로 watcher의 구체적인 구현에 대해서는 언급하지 않겠습니다. 관심이 있으시면 watcher의 소스 코드를 직접 살펴보실 수 있습니다.)

그러나 vue에서 watcher의 기능은 그렇게 간단하지 않습니다. 코드 사용:

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

로그인 후 복사

온라인 데모

위 코드는 매우 간단합니다. 이제 우리는 주로 이것에 중점을 둡니다._watchers는 다음과 같이 생성된 후크에 인쇄됩니다.

세 개의 관찰자를 각각 확장하고 위에서 아래로 각 표현식을 관찰합니다. :

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

로그인 후 복사

위의 세 가지 감시자는 서로 다른 세 가지 기능을 나타냅니다. Watcher를 기능에 따라 세 가지 범주로 나눕니다.

속성 변경을 모니터링하기 위해 watch에 정의된 감시자(두 번째)
에 대한 감시자 계산된 속성(첫 번째)
페이지 업데이트를 위한 감시자(세 번째)

normal-watcher

watch에서 정의하는 것은 모두 이 유형에 속합니다. 모니터링되는 속성이 변경되면 모든 것이 정의된 콜백 함수를 트리거합니다.

computed-watcher

모든 계산된 속성은 결국 해당 감시자 개체를 생성하지만 이러한 유형의 감시자에는 위의 b를 예로 들어 보겠습니다. :

속성 b에 따라 a가 변경되면 b는 즉시 다시 계산되지 않습니다. 나중에 다른 곳에서 b를 읽어야 하는 경우에만 실제로 계산됩니다. 즉, 게으른(lazy Calculation) 특성이 있습니다

render-watcher

각 구성 요소에는 하나의 render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }가 있습니다. data/computed

의 속성이 변경되면 렌더링 감시자가 호출되어 구성 요소의 보기를 업데이트합니다.

세 감시자의 실행 순서

기능적으로 다른 점을 제외하면 이 세 감시자는 다음과 같은 고정된 실행 순서를 갖습니다.

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

로그인 후 복사

이 배열에는 이유가 있으므로 구성 요소 뷰를 업데이트할 때 계산된 속성이 최대한 보장될 수 있습니다. 가 이미 최신 값이므로, render-watcher가 계산된 렌더링보다 앞에 순위가 지정되면 페이지가 업데이트될 때 계산된 값이 이전 데이터가 됩니다.

예제 코드에서 vue의 감시자를 살펴보겠습니다

이 예에서 watch 옵션을 사용하면 비동기 작업(API 액세스)을 수행하고 실행 빈도를 제한할 수 있습니다. 작업을 수행하고 최종 결과를 얻기 전에 중간 상태를 설정할 때. 이는 계산된 속성으로는 수행할 수 없는 작업입니다.

<p id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</p>
<!-- 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&#39;re familiar with. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: &#39;#watch-example&#39;,
data: {
question: &#39;&#39;,
answer: &#39;I cannot give you an answer until you ask a question!&#39;
},
watch: {
 // 如果 question 发生改变，这个函数就会运行
question: function (newQuestion) {
this.answer = &#39;Waiting for you to stop typing...&#39;
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(&#39;?&#39;) === -1) {
vm.answer = &#39;Questions usually contain a question mark. ;-)&#39;
return
}
vm.answer = &#39;Thinking...&#39;
axios.get(&#39;https://yesno.wtf/api&#39;)
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = &#39;Error! Could not reach the API. &#39; + error
})
},
// 这是我们为用户停止输入等待的毫秒数
500
)
}
})
</script>

로그인 후 복사