Vue3 snooping Properties

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 watch implement counters:

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>

The following example converts kilometers to meters:

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>

In the above code, we created two input boxes 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 .

When we enter the data in the input box again, 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:

Your browser does not support video label.

Used in asynchronous loading `watch`

Asynchronous data loading Vue passes through watch option provides a more general way to respond to changes in data.

The following example we use axios library, which will be described in detail later.

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>