In this chapter, we will introduce the Vue3 snooping properties
watch
we can pass through
watch
to respond to changes in the data.
The following example is done by using the The following example converts kilometers to meters: In the above code, we created two input boxes When we enter the data in the input box again, Your browser does not support Asynchronous data loading Vue passes through The following example we use
watch
implement counters: 2.12.1. Example ¶
<divid="app"><pstyle="font-size:25px;">counter: {{ counter
}}</p><button@click="counter++"style="font-size:25px;">Click me</button></div><script>const
app = { data() { return { counter: 1 } } } vm =
Vue.createApp(app).mount('#app') vm.$watch('counter', function(nval,
oval) { alert('Changes in counter values :' + oval + ' Become ' + nval + '!');
});</script>
2.12.2. Example ¶
<head><metacharset="utf-8"><title>Vue Test Example -
Rookie Tutorial(runoob.com)</title><scriptsrc="https://unpkg.com/vue@next"></script></head><body><divid="app">kilometre
:<inputtype="text"v-model="kilometers">metre
:<inputtype="text"v-model="meters"></div><pid="info"></p><script>const
app = { data() { return { kilometers : 0, meters:0 } }, watch : {
kilometers:function(val) { this.kilometers = val; this.meters =
this.kilometers \* 1000 }, meters : function (val) { this.kilometers =
val/ 1000; this.meters = val; } } } vm =
Vue.createApp(app).mount('#app') vm.$watch('kilometers', function
(newValue, oldValue) { // This callback will be called after the vm.kilometers change
document.getElementById ("info").innerHTML = "The value before modification is: " + oldValue +
"，The modified value is: " + newValue; })</script>
data
attribute in
kilometers
and
meters
the initial values are all 0.
watch
object has been created
data
there are two monitoring methods for the
kilometers
and
meters
.
watch
will listen for changes in data and change its own value in real time. You can take a look at the following video demonstration:
video
label.Used in asynchronous loading
watch
¶
watch
option provides a more general way to respond to changes in data.
axios
library, which will be described in detail later. 2.12.3. Example ¶
<!-- Because the ecosystem of AJAX libraries and general tools is already quite rich, the Vue core code is not duplicated -->
<!-- Provide these features to maintain simplicity. This can also allow you to freely choose tools that you are more familiar with.-->
<script
src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script>
const watchExampleVM = Vue.createApp({
data() {
return {
question: '',
answer: 'Do you need to input at the end of each question? Number.'
}
},
watch: {
// Whenever the problem changes, this function will run to? End of number
question(newQuestion, oldQuestion) {
if (newQuestion.indexOf('?') > -1) {
this.getAnswer()
}
}
},
methods: {
getAnswer() {
this.answer = 'LOADING...'
axios
.get('https://yesno.wtf/api')
.then(response => {
this.answer = response.data.answer
})
.catch(error => {
this.answer = 'Error! cannot access API。 ' + error
})
}
}
}).mount('#watch-example')
</script>