Vue에서 감시자를 사용하는 방법
- 亚连원래의
- 2018-06-22 17:21:371556검색
이 글은 주로 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('a is changed')
}
},
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'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: '#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>위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Angularjs에서 막대 차트의 동적 로딩을 구현하는 방법
에서 매개변수를 전달하는 방법에 대한 자세한 해석위 내용은 Vue에서 감시자를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!