Vue에서 감시자를 사용하는 방법-JS 튜토리얼-php.cn

Vue에서 감시자를 사용하는 방법

亚连

풀어 주다： 2018-06-22 17:21:37

원래의

1614명이 탐색했습니다.

이 글은 주로 vue에 있는 watcher에 대한 관련 정보를 소개합니다. 필요한 친구들은 참고하면 됩니다

Observing Watchers

대부분의 경우 계산된 속성이 더 적합하지만 때로는 맞춤 속성도 필요한 watcher가 있습니다. 이것이 Vue가 watch 옵션을 통해 데이터 변경에 응답하는 보다 일반적인 방법을 제공하는 이유입니다. 이는 데이터 변경에 대한 응답으로 비동기식 또는 비용이 많이 드는 작업을 수행하려는 경우 유용합니다.

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

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

로그인 후 복사

위의 작성 방법은 vue에게 someProp 속성의 변경 사항을 모니터링해야 함을 알려주므로 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);↵  }

로그인 후 복사

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

속성 변경 모니터링을 위해 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>

로그인 후 복사

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.